[css-cascade-5] Move unlayered styles below explicit layers by default #6284

Author: mirisuzanne

css-cascade-5/Overview.bs

@@ -1190,27 +1190,27 @@ Cascade Layers</h3>
 	or relying on source-order to resolve conflicts across layers.
 
 	<div class="example">
-		For example, the following generates an explicit ''defaults'' layer,
-		with lower cascade weight than any un-layered styles:
+		For example, the following generates an explicit ''utilities'' layer,
+		with higher cascade weight than any un-layered styles:
 
 		<pre class='lang-css'>
-			audio {
-			  /* specificity of 0,0,1 - implicit (final) layer */
-			  display: flex;
+			@layer utilities {
+				.padding-small {
+					/* specificity of 0,1,0 - explicit "utilities" layer */
+					padding: 0.25em;
+				}
 			}
 
-			@layer defaults {
-			  audio[controls] {
-			    /* specificity of 0,1,1 - explicit "defaults" layer */
-			    display: block;
-			  }
+			.card > .content {
+				/* specificity of 0,2,0 - implicit (first) layer */
+				padding: 1em;
 			}
 		</pre>
 
-		The un-layered declarations on the <{audio}> element take precedence
-		over the explicitly layered declarations on ''audio[controls]'' --
-		even though the un-layered styles have a lower specificity,
-		and come first in the source order.
+		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.
 	</div>
 
 <h4 id="layer-declaration">
@@ -1421,7 +1421,7 @@ Layer Ordering</h4>
 	Cascade layers are sorted
 	by the order in which they first are declared,
 	with nested layers grouped within their parent layers
-	before any unlayered rules.
+	after any unlayered rules.
 
 	<div class="example">
 		Given the following layer rules:
@@ -1442,22 +1442,30 @@ Layer Ordering</h4>
 			    h1, h2 { color: maroon; }
 			  }
 			}
+
+			/* unlayered styles come first in the layer order */
+			h1 { color: darkslateblue; }
 		</pre>
 
-		The outer layers are sorted first:
+		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:
 
-		1. ''framework''
-		2. ''utilities''
+		1. (implicit outer layer)
+		2. ''framework''
+		3. ''utilities''
 
 		Within each layer,
 		nested layers are sorted in appearance order,
 		and style rules without further nesting
-		are added to an implicit sub-layer which
-		takes priority over (comes after) explicitly nested layers:
+		are similarly added to an implicit sub-layer
+		before the explicitly nested layers:
 
-		1. ''framework.default''
-		2. ''framework.theme''
-		3. ''framework'' (implicit sub-layer)
+		1. (implicit outer layer)
+		2. ''framework'' (implicit sub-layer)
+		2. ''framework.default''
+		3. ''framework.theme''
 		4. ''utilities''
 	</div>
 
@@ -1466,6 +1474,8 @@ Layer Ordering</h4>
 	on the order of identically-named layers in the shadow DOM
 	(and vice versa).
 
+	Issue(6323): Allow authors to explicitly place unlayered styles in the layer order
+
 <h4 id="at-layer">
 Declaring Layers Inline: the ''@layer'' rule</h4>
 
@@ -1742,6 +1752,8 @@ Changes</h2>
 		(<a href="https://github.com/w3c/csswg-drafts/issues/5681">Issue 5681</a>)
 	* Added ''revert-layer'' keyword.
 		(<a href="https://github.com/w3c/csswg-drafts/issues/5793">Issue 5793</a>)
+	* Switched the ordering of unlayered styles
+		from highest to lowest priority in the normal origins.
 
 <h3 id="additions-l4">
 Additions Since Level 4</h3>