[css-cascade-5] Revert the ordering of unlayered styles #6284

Author: mirisuzanne

css-cascade-5/Overview.bs

@@ -1017,7 +1017,7 @@ Cascade Sorting Order</h3>
 			can be explicitly assigned to a [=cascade layer=].
 			For the purpose of this step,
 			any declaration not assigned to an explicit layer
-			is added to an implicit first layer.
+			is added to an implicit final layer.
 
 			Cascade layers (like declarations) are ordered by order of appearance.
 			When comparing declarations that belong to different layers,
@@ -1196,27 +1196,27 @@ Cascade Layers</h3>
 	or relying on source-order to resolve conflicts across layers.
 
 	<div class="example">
-		For example, the following generates an explicit ''utilities'' layer,
-		with higher cascade weight than any un-layered styles:
+		For example, the following generates an explicit ''reset'' layer,
+		with lower cascade weight than any unlayered styles:
 
 		<pre class='lang-css'>
-			@layer utilities {
-			  .padding-small {
-			    /* specificity of 0,1,0 - explicit "utilities" layer */
-			    padding: 0.25em;
-			  }
-			}
+		audio {
+		  /* specificity of 0,0,1 - implicit (final) layer */
+		  display: flex;
+		}
 
-			.card > .content {
-			  /* specificity of 0,2,0 - implicit (first) layer */
-			  padding: 1em;
-			}
+		@layer reset {
+		  audio[controls] {
+		    /* specificity of 0,1,1 - explicit "reset" layer */
+		    display: block;
+		  }
+		}
 		</pre>
 
-		The explicitly layered declarations on <code>.padding-small</code> take precedence
-		over the un-layered declarations on the <code>.card > .content</code> element --
-		even though the un-layered styles have a higher specificity,
-		and come later in the source order.
+		The unlayered declarations on the <{audio}> element take precedence
+		over the explicitly layered declarations on <code>audio[controls]</code> --
+		even though the unlayered styles have a lower specificity,
+		and come first in the source order.
 	</div>
 
 	Name-defining [=at-rules=]
@@ -1467,52 +1467,52 @@ Layer Ordering</h4>
 	Cascade layers are sorted
 	by the order in which they first are declared,
 	with nested layers grouped within their parent layers
-	after any unlayered rules.
+	before any unlayered rules.
 
 	<div class="example">
 		Given the following layer rules:
 
 		<pre class='lang-css'>
-			@layer framework.default {
-			  strong { font-weight: bold; }
-			}
+		/* unlayered styles come last in the layer order */
+		h1 { color: darkslateblue; }
 
-			@layer utilities {
-			  [hidden] { display: none; }
-			}
+		@layer reset.type {
+		  strong { font-weight: bold; }
+		}
 
-			@layer framework {
-			  .title { font-weight: 100; }
+		@layer framework {
+		  .title { font-weight: 100; }
 
-			  @layer theme {
-			    h1, h2 { color: maroon; }
-			  }
-			}
+		  @layer theme {
+		    h1, h2 { color: maroon; }
+		  }
+		}
 
-			/* unlayered styles come first in the layer order */
-			h1 { color: darkslateblue; }
+		@layer reset {
+		  [hidden] { display: none; }
+		}
 		</pre>
 
 		The outer layers are sorted first,
 		with any unlayered style rules
 		added to an implicit outer layer which
-		has lower priority (comes before) the explicit layers:
+		has higher priority than (comes after) the explicit layers:
 
-		1. (implicit outer layer)
+		1. ''reset''
 		2. ''framework''
-		3. ''utilities''
+		3. (implicit outer layer)
 
 		Within each layer,
 		nested layers are sorted in appearance order,
 		and style rules without further nesting
 		are similarly added to an implicit sub-layer
-		before the explicitly nested layers:
+		after the explicitly nested layers:
 
-		1. (implicit outer layer)
-		2. ''framework'' (implicit sub-layer)
-		2. ''framework.default''
+		1. ''reset.type''
+		2. ''reset'' (implicit sub-layer)
 		3. ''framework.theme''
-		4. ''utilities''
+		4. ''framework'' (implicit sub-layer)
+		5. (implicit outer layer)
 	</div>
 
 	Layers that are defined inside of a [=conditional group rule=]
@@ -1864,8 +1864,9 @@ Changes since the 29 August 2021 Working Draft</h3>
 
 	Changes since the <a href="https://www.w3.org/TR/2021/WD-css-cascade-5-20210608/">8 June 2021 Working Draft</a> include:
 
-	* Fixed a missed edit for switching ordering of unlayered styles.
-		(See [[#changes-2021-06]].)
+	* Revert the ordering of unlayered styles.
+		(See [[#changes-2021-06]] and
+		<a href="https://github.com/w3c/csswg-drafts/issues/6284">Issue 6284</a>)
 
 <h3 id="changes-2021-08">
 Changes since the 8 June 2021 Working Draft</h3>