浅谈 CSS Cascading 在 CSS @layer 后的变化

[chokcoco]

本文未完成

---

CSS Cascade 规范

在 CSS @layer 之前，我们简单看一张图：

上图表面的是在没有 CSS @layer 之前，CSS 样式申明的优先级排序，根据 CSS Cascading 4(Current Work) 标准，定义的当前规范下申明的层叠顺序优先级如下（越往下的优先级越高，下面的规则按升序排列）：

• Normal user agent declarations
• Normal user declarations
• Normal author declarations
• Animation declarations
• Important author declarations
• Important user declarations
• Important user agent declarations
• Transition declarations

按照上述算法，可以得到一个样式优先级的排序，大概是这样（越往下的优先级越高，下面的规则按升序排列）：

1. User Agent - 用户代理普通样式
2. User - 用户设置的普通样式
3. Author - 页面作者普通样式
4. Animations - 动画样式
5. ❗️Author - 页面作者 !important 样式
6. ❗️User - 用户设置的 !important 样式
7. ❗️User Agent - 用户代理的 !important 样式
8. Transitions - 过渡样式

简单解释一下：
用户代理样式：浏览器会有一个基本的样式表来给任何网页设置默认样式。这些样式统称用户代理样式
页面作者样式：网页的作者可以定义文档的样式，这是最常见的样式表。大多数情况下此类型样式表会定义多个，它们构成网站的视觉和体验，即页面主题，可以理解为页面作者样式
用户样式：读者，作为浏览器的用户，可以使用自定义样式表定制使用体验，自定义用户偏好，可以理解为用户样式

关于 CSS Cascading，也就是层叠规范，你可以看看我的这篇文章加深理解 -- 深入理解 CSS（Cascading Style Sheets）中的层叠（Cascading）。

而当有了 CSS @layer 之后，这个层叠优先级顺序有了更新，具体优先级如下：

整体会变更为复杂一些，但是总体还是遵循了 !important 样式高于非 !important 样式。