CSS 新鲜事-Hello, Cascade Layers

图片描述

蓝桥云课近期上线了轻实验功能，支持在社区发布技术类帖子的时候绑定实验环境。读者可以在阅读技术内容的时，打开实验环境练习。

你现在看到的帖子就是一个轻实验，可以点击标题右侧的【启动环境】试一下。😄

接下来，我们来看一看实验内容吧 ~

对于一个前端学习者来说， CSS 应该算是前端中的老朋友了。在 2022 年中，它有了一些改变。

这里给大家介绍一下 CSS 新特性--级联层（Cascade Layers）。

问题：冲突的发生

当一群人共同开发一个大型项目时，可能会发生一些冲突，由于选择器的优先级，你的 CSS 可能被更高优先级的选择器给覆盖掉，例如，引入了第三方组件，你的 CSS 可能会被覆盖掉，那么这时你可能会想到使用 !important。但大量使用 !important 又会引入其他的问题，比如在 CSS 中 !important 中随处可见，需要被覆盖的 CSS 又没有被覆盖到，因为当两个相互冲突且带有 !important 作用于同一元素时，拥有最大优先级的选择器会去覆盖另一个。

在讲解级联层之前我们先来看个例子。

例如，我们有两个按钮，分别是取消按钮和保存按钮。

CSS：

.button {
  color: aliceblue;
  background-color: rgb(208, 123, 183);
  border: 1px solid rgb(208, 123, 183);
  border-radius: 5px;
}
.button-ghost {
  background-color: transparent;
  color: #474747;
  border: 2px solid #e0e0e0;
}
copy

HTML：

<footer class="form-active">
  <button class="button">保存</button>
  <button class="button button-ghost">取消</button>
</footer>
copy

显示效果如下：

图片描述

可以看出保存按钮使用的是 .button 中的 CSS，而取消按钮使用的是 .button-ghost 中的样式。

我们再多加一个按钮，并把该按钮的样式写在 .button 之前，看看会发生什么。

CSS：

:root {
  --brand-fb: rgb(192, 255, 193);
}
.button-back {
  background-color: var(--brand-fb);
  color: #fff;
}
.button {
  color: aliceblue;
  background-color: rgb(208, 123, 183);
  border: 1px solid rgb(208, 123, 183);
  border-radius: 5px;
}
.button-ghost {
  background-color: transparent;
  color: #474747;
  border: 2px solid #e0e0e0;
}
copy

HTML：

<footer class="form-active">
  <button class="button">保存</button>
  <button class="button button-ghost">取消</button>
  <button class="button button-back">返回</button>
</footer>
copy

显示效果如下：

图片描述

打开控制台我们可以看到：

图片描述

可以发现 .button-back 的 CSS 被 .button 的 CSS 覆盖了。

如果我们想要解决这个问题，可能会想到下面两种方式。

1. 使用后代选择器

.form-active .button-back {
  background-color: var(--brand-fb);
  color: #fff;
}
copy

2. 使用 !important

.button-back {
  background-color: var(--brand-fb); !important
  color: #fff; !important
}
copy

虽然以上两种方式皆能解决问题，但不是最佳解决方案。其实，我们只要把 .button-back 放在 .button 的后面就好了。

如果没有像 Sass 这样的 CSS 预处理帮助我们，这个工作量是不小滴。

解决方案：级联层（Cascade layers）

级联层赋予了开发者更大的权力去控制级联。

使用 @layer 可以制定 CSS 执行的顺序，越往后级联层的权重越高。

我们来看个例子。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>级联层的使用</title>
    <style>
      /*定义 CSS 样式执行顺序*/
      @layer two, three, one;
      div {
        width: 50px;
        height: 50px;
      }
      /*将 CSS 添加到每一层*/
      @layer one {
        div {
          background-color: #c8b6e2; /*紫色*/
        }
      }
      @layer two {
        #box {
          background-color: #fbb454; /*黄色*/
        }
      }
      @layer three {
        .content {
          background-color: #ff7396; /*红色*/
        }
      }
    </style>
  </head>
  <body>
    <div id="box" class="content"></div>
  </body>
</html>
copy

最后在页面上 div 元素的背景颜色为紫色，虽然我们使用了 ID 选择器，但是在定义的级联层中 one 的优先级是最高的。

图片描述

使用 Chrome DevTools 可以清楚地看到样式来自哪些层。

图片描述

问题：冲突的发生

解决方案：级联层（Cascade layers）

阅读资料