简介

什么是 CSS Cascade Layers

即将推出的 CSS Cascading and Inheritance: Cascade Layers 致力于通过将 CSS 分层的方式避免预期外的样式覆盖，并提供更好的 CSS 组织结构。通过分层，我们可以更显式地声明每一层的选择器权重，确保不会出现默认权重导致的跨层样式覆盖。

📌 一句话概括 Layer 的特点：**对于处在不同层中的样式，无视样式本身的权重，后声明的层中的样式优先级更高，不在层中的样式优先级最高。**

使用

基础使用

@layer 的使用非常简单，只需在原有的 CSS 代码外包裹一层 @layer <layer-name> 即可：

@layer defaults {
	/* CSS 样式 */
}

`@layer` 的优先级

在 @layer 声明的顶部可通过调整 @layer 的命名的顺序来调整 @layer 的优先级，如果不进行声明的化默认为越晚声明的 @layer 的优先级越高。

`@layer` 的嵌套语法

可以按嵌套图层规则对图层进行分组：

@layer one {
  /* sorting the sub-layers */
  @layer two, three;

  /* styles ... */
  @layer three { /* styles ... */ }
  @layer two { /* styles ... */ }
}

图层排序规则适用于嵌套的每个级别。在该上下文中，任何未进一步嵌套的样式都被视为"未分层"，并且优先于其他嵌套样式：

@layer defaults {
  /* 非分层样式具有最高优先级 */
  :any-link { color: rebeccapurple; }

  /* 低优先级 */
  @layer reset {
    a[href] { color: blue; }
  }
}

示例：

/* 预先建立层顺序，从最低到最高优先级 */
@layer reset, defaults, patterns, components, utilities, overrides;

/* 将样式表导入图层（点语法表示嵌套） */
@import url('framework.css') layer(components.framework);

/* add styles to layers */
@layer utilities {
  /* high layer priority, despite low specificity */
  [data-color='brand'] { 
    color: var(--brand, rebeccapurple);
  }
}

@layer defaults {
  /* 更高的优先级，但更低的层优先级 */
  a:any-link { color: maroon; }
}

@layer base {
  @layer two, one;
  /*a {*/
  /*    color: mediumvioletred;*/
  /*}*/

  @layer one {
    a {
      color: red;
    }
  }

  @layer two {
    a {
      color: blue;
    }
  }
}

/* 非分层样式具有最高优先级 */
a {
  color: mediumvioletred;
}

📌 不管样式选择器的特异性(权重)如何，总是后声明的 Layer 中的样式更优先一些。

为什么会出现

样式冲突问题

在项目中，我们经常会使用一些现有的组件库来加快我们的项目开发进度，而这些库基本都会带有一份样式文件，在我们需要对其中的样式进行修改的时候，通常会想要去覆盖样式文件中声明的 class，比如在样式文件中：

.overly#powerful .framework.widget {
  color: maroon;
}

.my-single_class { /* add some IDs to this ??? */
  color: rebeccapurple; /* add !important ??? */
}

使用 @layer，我们可以建立自己的级联层级联层 — 从低优先级样式（如重置和默认值）到主题、框架和设计系统，再到最高优先级样式（如组件、实用程序和覆盖）进行构建。特异性仍应用于每个图层内的冲突，但始终使用优先级较高的图层样式来解决图层之间的冲突。

例如我们在后台开发时可能会用到 antd 这个组件库，我们在引入的时候可以使用 @layer 将其引入，这样的化后面重置样式会非常方便。

@layer antd, utilities;

@import url("~antd/dist/antd.css") layer(antd);

@layer utilities {
  button {
    color: deeppink;
  }
}

浏览器支持情况

"CSS Cascade Layers" | Can I use... Support tables for HTML5, CSS3, etc

从 Can I use 上查询可知，目前主流浏览器的最新版本都已对CSS Cascade Layers支持，一些对浏览器兼容要求没有那么高的中后台应用可以尝试在生产环境中使用了。

参考

A Complete Guide to CSS Cascade Layers | CSS-Tricks

CSS Cascade Layers

简介