[csswg-drafts] [css-cascade-5] Reword section on layer ordering (#7041)

bramus has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-cascade-5] Reword section on layer ordering ==
The section about layer ordering in css-cascade-5 currently reads:

> Cascade layers are sorted by the order in which they first are declared […]

> The outer layers are sorted first […]

> […] the layout layer will come first in the layer order […]

The resulting lists to go along with the code are always in **ascending weight/priority order** _(lowest prio at the top, highest prio at the bottom)_. For example, for `@layer default, theme, components`, we get:

> 1. default
> 2. theme
> 3. components
> 4. unlayered

In the section about Origins, however, the Origins get represented as a list in **descending priority order** _(highest prio at the top, lowest prio at the bottom)_:

1. Transitions
2. Important UA
3. Important User
4. Important Author
5. Animations
6. Normal Author
7. Normal User
8. Normal UA

While both of these representations are fine by themselves, it’s a bit confusing that they don’t follow the same order. I personally prefer the representation as used in Origins, as it resembles a stack.

---

While writing [my post on Cascade Layers](https://brm.us/at-layer) I tried to follow the representation/order as seen in the spec, suppressing the reflex of using a stack, ending up with a list:

![image](https://user-images.githubusercontent.com/213073/150830385-7b21e00d-34a8-421e-906e-3f80669e72f9.png)

Now, looking at [a new post by Stephanie Eckles on Cascade Layers](https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/), I see she did grab to using the concept of something more stack-y in her visualization:

![image](https://user-images.githubusercontent.com/213073/150829310-85b3641b-c0dc-4259-a131-27230a5f3af3.png)

_(Graphic by Stephanie, with the lowest prio at the bottom and the highest prio at the top)_

Just yesterday, [Ahmad Shadeed also published a post on Cascade Layers](https://ishadeed.com/article/cascade-layers/) where he represented things as a stack.

![image](https://user-images.githubusercontent.com/213073/153715781-b0323e89-09d2-4feb-81cb-4c02c280ab9f.png)

_(Graphic by Ahmad, with the lowest prio at the bottom and the highest prio at the top)_

👉 **As other people also seem to have the reflex to represent things as a stack, would it make sense to reword the ordering mechanics of Layers to be in line with that of Origins?**

---

I would suggest to:

- Not use words like “before|after” or “first|last layer” in the spec, but always use words such as “higher|lower priority” (or “higher|lower cascade weight”)
- Use the same ordering as seen with Origins when representing layers in a list; i.e. rank them from high priority at the top to low priority at the bottom

That way, both Origins and Layers use lists in the “lowest prio at the bottom, highest prio at the top” form and visualizations that look like a stack.

As a benefit: If you understand the explanation from one, you also understand the other because they use the same representation.

---

I know it isn’t strictly necessary to update the spec on this — it is clear after all — but I do think people who saw a talk (or read a post) and now want to check the spec will benefit from this, as it removes friction to understand it — It’d be very confusing to, at a first glance, see a different order in the spec after just been having told differently.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7041 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 12 February 2022 14:52:51 UTC