[css-cascade-5] Revert the ordering of unlayered styles #6284 · w3c/csswg-drafts@a6fc16e (original) (raw)

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:

 @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;

 }

 }



  
 The explicitly layered declarations on .padding-small take precedence

 over the un-layered declarations on the .card \> .content 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 audio\[controls\] \--

 even though the unlayered styles have a lower specificity,

 and come first in the source order.



  
 Name-defining \[=at-rules=\]

[ ](#diff-e51ab1d34c7bb4d7b2544d362e880083216b728b18226e0dd3cd0c6700c63f2e) Expand Down [ ](#diff-e51ab1d34c7bb4d7b2544d362e880083216b728b18226e0dd3cd0c6700c63f2e) Expand Up 

@@ -1467,52 +1467,52 @@ Layer Ordering

 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.

  


 Given the following layer rules:

  

 @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; }

 }



  
 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)



  
 Layers that are defined inside of a \[=conditional group rule=\]

[ ](#diff-e51ab1d34c7bb4d7b2544d362e880083216b728b18226e0dd3cd0c6700c63f2e) Expand Down [ ](#diff-e51ab1d34c7bb4d7b2544d362e880083216b728b18226e0dd3cd0c6700c63f2e) Expand Up 

@@ -1864,8 +1864,9 @@ Changes since the 29 August 2021 Working Draft

  
 Changes since the 8 June 2021 Working Draft 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

Issue 6284)

  


Changes since the 8 June 2021 Working Draft

[ ](#diff-e51ab1d34c7bb4d7b2544d362e880083216b728b18226e0dd3cd0c6700c63f2e) Expand Down