江苏龙网

  1. 主页 > 生活百科 > >

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

css


也就是说 @layer 这个at-rule（AT规则） 用于声明级联层（cascade layer），也能用于定义多个级联层的优先级 。
At-rules 是什么？
At-rules是指导 CSS 如何表现的CSS 语句 。它们以 at 符号 ' @' ( U+0040 COMMERCIAL AT) 开头，后跟一个标识符，包括下一个分号 ' ;' ( U+003B SEMICOLON) 或下一个CSS 块之前的所有内容 。
我们开发常见的at-rule有@charset、@media、@font-face 、@keyframes 等 。
3.2 @layer的句法规则@layer的句法如下：
@layer layer-name {rules}@layer layer-name;@layer layer-name, layer-name, layer-name;@layer {rules}3.3 如何创建级联层可以通过多种方式创建级联层 。
第一种方法是：创建命名的级联层，其中包含该层的 CSS 规则，如下所示：
@layer green {.item {color: green;border: 5px solid green;font-size: 1.3em;padding: 0.5em;width: 120px;}} @layer special {.item {color: rebeccapurple;}}第二种方法是：创建一个命名的级联层而不分配任何样式 。这可以是单层，如下所示：
@layer green;可以一次定义多个层，如下：@layer green, special一次定义多个层有什么好处呢？
因为声明层的初始顺序决定了层的优先级 。与声明一样，如果在多个层中找到声明，最后定义的层声明将最终生效 。看下面代码：
@layer green,special;@layer green {#app .item {color: green;border: 5px solid green;font-size: 1.3em;padding: 0.5em;width: 120px;}}@layer special {.item {color: rebeccapurple;}}效果如下图：

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

文章插图
special层中item样式规则将被应用即使它的特异性低于 green层中的规则 。这是因为一旦层顺序定义完成，就会忽略选择器特异性 。
同样也会忽略出现的顺序：
我们声明层名称并设置它们的顺序后，可以通过重新声明名称来将 CSS 规则添加到图层 。然后将样式附加到层，并且层顺序不会更改 。比如如下代码虽然@layer green重新声明了并在文件后方但是由于顺序一开始已经设置所以字体颜色还是紫色：
@layer green,special;@layer special {.item {color: rebeccapurple;}} @layer green {.item {color: green;border: 5px solid green;font-size: 1.3em;padding: 0.5em;width: 120px;}}效果如下：
CSS@layer 前端开发如何更好的避免样式冲突？级联层

文章插图
忽略选择器特异性和代码出现顺序可以让我们创建更简单的 CSS 选择器，并使代码优雅，因为不必确保选择器具有足够高的特异性来覆盖其他css规则，只需要确保它出现在后面的层中 。
第三种方法是：创建一个没有名称的级联层 。例如：
@layer {.item {color: black;}}这将创建一个匿名级联层，该层功能与命名层相同 。但是使用匿名层有如下缺点:
  1. 可读性较差：匿名层没有名称，会导致样式表不易阅读和理解 。特别是在大型项目中，可能会出现样式不断增加，难以跟踪和管理的问题 。
  2. 难以扩展：如果稍后想要更改特定样式或组合，也会很难找到特定的代码块 。
  3. 不可复用性：匿名层中的样式不能在其他地方重复使用或引用 。这样会使样式表更难以管理和维护 。
平时我们尽量避免使用匿名层 。但当我们是样式库的作者，并想将某些css代码不被使用者修改可以借助匿名层做到这一点 。
第四种方法是：使用@import 。CSS 原生支持 @import 导入其他 CSS 文件 。
@import url(index.css) layer(index);同时，也支持匿名引入，例如：
@import url(index.css) layer;我们在使用@import时候需要放在除@charset之外的样式规则前，否则无法导入 。
可能的第五种方式仍在讨论中：通过元素上的属性 。请参阅[css-cascade] Provide an attribute for assigning ato a cascade layer #5853 。
3.4 层的嵌套规则图层可以嵌套 。例如：
@layer base {p { max-width: 70ch; }}@layer framework {@layer base {p { margin-block: 0.75em; }}@layer theme {p { color: #222; }}}生成的层可以表示为一棵树：
1.base
  • framework
  • base
2.theme
或可以用扁平列表表示
  1. base
  2. framework.base
  3. framework.theme
要将样式附加到嵌套层，您需要使用以下全名来引用它：


推荐阅读


上一篇：除了OpenAI，全球还有这12家生成式AI独角兽值得关注

下一篇：Kafka实时数据即席查询应用与实践