CSS@layer 前端开发如何更好的避免样式冲突？级联层( 四 ) _CSS

@layer framework {@layer default {p { margin-block: 0.75em; }}@layer theme {p { color: #222; }}}@layer framework.theme {/* 这些样式会被添加到framework层里面的theme层 */blockquote { color: rebeccapurple; }}看效果：

文章插图
3.5 层的排序规则级联层按照它们声明的顺序排序。第一层优先级最低，最后一层优先级最高。但是，未分层的样式具有最高优先级：

/* 未分层 */a { color: green; }@layer layer-1 { a { color: red; } }@layer layer-2 { a { color: orange; } }@layer layer-3 { a { color: yellow; } }

优先级顺序如下：

未分层样式
layer-3
layer-2
layer-1

看下图示例：

文章插图
层可以在一个地方被定义图层（以建立图层顺序），然后在任何地方添加样式

/* 定义在一个地方 */@layer my-layer;/* 其他样式*/.../* 在某个地方添加样式 */@layer my-layer { a { color: red; } }

3.6 加上!important之后的排序规则

/* 未分层 */ a { color: green !important; }@layer layer-1 { a { color: red !important; } }@layer layer-2 { a { color: orange !important; } }@layer layer-3 { a { color: yellow !important; } }

任何加上重要声明的样式都以相反的顺序应用
优先级顺序如下：

!important layer-1
!important layer-2
!important layer-3
!important 未分层样式

看下图示例：

文章插图
这里我们看到对应规则在chrome浏览器的显示是正确的。但是在开发者控制台中的样式一栏规则显示有问题。应该是chrome浏览器开发者控制台的bug 。
3.7 嵌套层的排序规则

@layer layer-1 { a { color: red; } }@layer layer-2 { a { color: orange; } }@layer layer-3 {@layer sub-layer-1 { a { color: yellow; } }@layer sub-layer-2 { a { color: green; } }/* 未嵌套 */ a { color: blue; }}/* 未分层 样式 */ a { color: black; }

优先级顺序如下：

未分层样式
layer-3
-layer-3 未嵌套
-layer-3 sub-layer-2
-layer-3 sub-layer-1
layer-2
layer-1

文章插图
3.8 媒体查询对层排序的影响以下层顺序将取决于匹配的媒体条件：
例如：

@media (min-width: 600px) {@layer layout {.item {font-size: x-large;}} } @media (prefers-color-scheme: dark) {@layer theme {.item {color: red;}}}

如果两个媒体查询的规则中匹配一个那么对应的级联层生效。如果两者都匹配，那么图层顺序将为layout, theme都生效。如果两个都不匹配则不定义层。下图是两者都匹配的场景。

文章插图
四、现在就能使用级联层吗？4.1 目前浏览器支持程度

文章插图
图片来源：developer.mozilla.org
目前所有现代浏览器均已经支持 @layer 规则。所有浏览器厂商都支持的特性未来一定比较实用。
4.2 W3C 鼓励可以作为日常使用SS 的标准化流程由 W3C Cascading Style Sheets Working Group (CSSWG)——W3C层叠样式列表小组以及独立CSS专家组成。W3C 本身并不制定标准，而是作为一个论坛式的平台，接收来自小组成员的提交，并通过会议来商讨制定标准，所有的提交以及讨论都是公开透明的，可以在 W3C 网站上看到会议的记录，可以简单分为4个大阶段：