[css-nesting-1][editorial] Clean up example #6682

Author: fantasai

css-nesting-1/Overview.bs

@@ -522,48 +522,47 @@ Syntax {#syntax}
 	</div>
 
 	<div class=note>
-		Some CSS-generating tools will concatenate selectors like strings,
-		allowing authors to build up a single simple selector
+		Some CSS-generating tools that preprocess nesting
+		will concatenate selectors as strings,
+		allowing authors to build up a <em>single</em> [=simple selector=]
 		across nesting levels.
-		This is sometimes used by selector-organization methods
+		This is sometimes used with hierarchical name patterns
 		like <a href="https://en.wikipedia.org/wiki/CSS#:~:text=bem%20(block%2C%20element%2C%20modifier)">BEM</a>
 		to reduce repetition across a file,
 		when the selectors themselves have significant repetition internally.
 
 		For example, if one component uses the class ''.foo'',
-		and a nested component uses ''.foo__bar'',
+		and a nested component uses ''.fooBar'',
 		you could write this in <a href="https://sass-lang.com/">Sass</a> as:
 
 		<pre class="lang-css">
 		.foo {
-			color: blue;
-			&__bar { color: red; }
+		        color: blue;
+		        &Bar { color: red; }
 		}
 		/* In Sass, this is equivalent to
 		   .foo { color: blue; }
-		   .foo__bar { color: red; }
+		   .fooBar { color: red; }
 		*/
 		</pre>
 
-		Unfortunately, this method is inconsistent with selector syntax in general,
-		and at best requires heuristics tuned to particularly selector-writing practices
-		to recognize when the author wants it,
-		versus the author attempting to add a type selector in the nested rule.
-		''__bar'', for example,
+		Unfortunately, this string-based interpretation is ambiguous with
+		the author attempting to add a type selector in the nested rule.
+		''Bar'', for example,
 		<em>is</em> a valid <a href="https://html.spec.whatwg.org/multipage/custom-elements.html">custom element name</a> in HTML.
 
-		As such, CSS can't do this;
-		the nested selector components are interpreted on their own,
-		and not "concatenated":
+		CSS doesn't do this:
+		the nested selector components are interpreted atomically,
+		and not string-concatenated:
 
 		<pre class="lang-css">
 		.foo {
-			color: blue;
-			&__bar { color: red; }
+		        color: blue;
+		        &Bar { color: red; }
 		}
 		/* In CSS, this is instead equivalent to
 		   .foo { color: blue; }
-		   __bar.foo { color: red; }
+		   Bar.foo { color: red; }
 		*/
 		</pre>
 	</div>