improve explanation (after code review feedback)

Peter Hozak · Peter Hozak · commit 72c079e87879 · 2019-02-07T16:11:51.000+01:00
diff --git a/03-css-debugging/README.md b/03-css-debugging/README.md
@@ -26,7 +26,10 @@ cd src/examples/
 ```
 * 00 Intro
   * Using [browser inspector](https://developers.google.com/web/tools/chrome-devtools/css/) (right click > Inspect)
-  * Good class names more important due to lack of step-by-step debug
+    * No step-by-step debug
+    * So good class names are more important
+    * Or at least React component names, including [HOC](https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging)
+    * Temporary background / outline also useful
   * Know thy framework / use consistent code style to simplify search in code
   * CSS vs CSS-in-JS => hot reload vs cleaner code over time
 * 01 Vertical alignment
diff --git a/03-css-debugging/src/App.scss b/03-css-debugging/src/App.scss
@@ -33,9 +33,13 @@
   }
 }
 
+// !! Keep following code, to uncomment during parts of live demo. !!
+//
 //$debugColor: #c30;
 //* {
 //  background: rgba($debugColor, .1) !important;
 //  outline: 1px dotted $debugColor !important;
 //  color: $debugColor !important;
 //}
+//
+// !! End keep !!
diff --git a/03-css-debugging/src/examples/examples.scss b/03-css-debugging/src/examples/examples.scss
@@ -41,5 +41,6 @@
 
 
 #ddfdsfas, div[dsfas*=fsafdsa], .first.second, .dfasfsafasdfc {
+  // overwriting Intro styles "by accident"
   color: red;
 }

Original file line number	Diff line number	Diff line change
`@@ -33,9 +33,13 @@`
`33`	`33`	`}`
`34`	`34`	`}`
`35`	`35`
	`36`	`+// !! Keep following code, to uncomment during parts of live demo. !!`
	`37`	`+//`
`36`	`38`	`//$debugColor: #c30;`
`37`	`39`	`//* {`
`38`	`40`	`// background: rgba($debugColor, .1) !important;`
`39`	`41`	`// outline: 1px dotted $debugColor !important;`
`40`	`42`	`// color: $debugColor !important;`
`41`	`43`	`//}`
	`44`	`+//`
	`45`	`+// !! End keep !!`
Original file line number	Diff line number	Diff line change
`@@ -41,5 +41,6 @@`
`41`	`41`
`42`	`42`
`43`	`43`	`#ddfdsfas, div[dsfas*=fsafdsa], .first.second, .dfasfsafasdfc {`
	`44`	`+ // overwriting Intro styles "by accident"`
`44`	`45`	`color: red;`
`45`	`46`	`}`