[css-nesting-1] demo the result of BEM style nesting (w3c#6276)

Author: argyleink

css-nesting-1/Overview.bs

@@ -304,6 +304,30 @@ Direct Nesting {#direct}
 		 */
 		</pre>
 
+		Note: 
+		<a href="https://en.wikipedia.org/wiki/CSS#:~:text=bem%20(block%2C%20element%2C%20modifier)">BEM</a> authors often use preprocessors to 
+		stay <a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself">dry</a> 
+		within a file and selector context,
+		and preprocessors would concatenate the selectors like strings.
+		This however is not how it works in browsers. Authors may still practice BEM, 
+		but the nested selector string building technique will need to stay a feature 
+		of preprocessors.
+
+		For example:
+
+		<pre class=lang-css>
+		.foo {
+			color: blue;
+			&__bar { padding: 2ch; }
+		}
+		/* equivalent to
+			 .foo { color: blue; }
+			 __bar.foo { padding: 2ch; }
+		 */
+		</pre>
+
+		''__bar'' is a valid potential <a href="https://html.spec.whatwg.org/multipage/custom-elements.html">custom element</a>.
+
 		But the following are invalid:
 
 		<pre class=lang-css>