[css-cascade-5][editorial] Clarify ordering requirements in example

Author: mirisuzanne

css-cascade-5/Overview.bs

@@ -1619,8 +1619,8 @@ Declaring Without Styles: the ''@layer'' statement at-rule</h5>
 	(after the ''@charset'' rule, if any)
 	as well as everywhere ''@layer'' [=block at-rules=] are allowed.
 
-	Note: Empty ''@layer'' rules are not allowed between ''@import'' and ''@namespace'' rules.
-	A ''@layer'' rule that comes after an ''@import'' or ''@namespace'' rule
+	Note: No ''@layer'' rules are allowed between ''@import'' and ''@namespace'' rules.
+	Any ''@layer'' rule that comes after an ''@import'' or ''@namespace'' rule
 	will cause any subsequent ''@import'' or ''@namespace'' rules to be ignored.
 
 	Unlike the [[#layer-block|block syntax]],
@@ -1638,16 +1638,16 @@ Declaring Without Styles: the ''@layer'' statement at-rule</h5>
 		The statement syntax
 		allows establishing a layer order in advance,
 		regardless of the order in which style rules are added to each layer.
-
+		It can be helpful to establish that layer order in advance,
+		before any ''@import'' rules.
 		In this example,
 		the imported <code>theme.css</code> style rules will override
 		any rules added in the later <css>default</css> block
-		since the order of layers has already been established.
+		since the order of layers has already been established:
 
 		<pre class='lang-css'>
-			@layer default;
+			@layer default, theme, components;
 			@import url(theme.css) layer(theme);
-			@layer components;
 
 			@layer default {
 			  audio[controls] {
@@ -1656,23 +1656,40 @@ Declaring Without Styles: the ''@layer'' statement at-rule</h5>
 			}
 		</pre>
 
-		It can also be written with the comma-separated syntax as:
+		It's also possible to have ''@import'' rules
+		help establish the order,
+		by placing them between ''@layer'' rules.
+		This example will have the same result:
 
 		<pre class='lang-css'>
-			@layer default, theme, components;
+			@layer default;
 			@import url(theme.css) layer(theme);
+			@layer components;
 
 			@layer default {
 			  audio[controls] {
 			    display: block;
 			  }
 			}
 		</pre>
-	</div>
-
 
+		However,
+		''@import'' and ''@namespace'' rules must be consecutive,
+		without any intervening rules.
+		The following is invalid:
 
+		<pre class='lang-css'>
+			@import url(default.css) layer(default);
+			@layer theme;
+			@import url(components.css) layer(components);
 
+			@layer theme {
+			  audio[controls] {
+			    display: block;
+			  }
+			}
+		</pre>
+	</div>
 
 
 <h3 id="preshint">