@layer

@layer 是 CSS 的一项新特性（CSS Cascade Layers）,用于增强样式的可维护性和可预测性，特别适用于大型项目或框架化开发场景。@layer 可以把 CSS 分成“层（layer）”，然后按照层的顺序来决定样式的优先级，优先级比 specificity，仅次于 !important。

语法：

/* layer-name 的主要作用是用来灵活设置 @layer 和其他 @layer 规则的前后优先级。 */
/* rules 是级联层中的一组 CSS 规则 */
@layer layer-name {rules}
@layer layer-name;
@layer layer-name1, layer-name2, layer-name3;
@layer {rules}

不属于任何层的规则，都将会被同意集中到匿名层，并置于所有层的后面，这意味着任何在层外声明的样式都会覆盖在层内声明的样式，而不管选择器权重和优先级如何。

/* 定义层 */
@layer base;
@layer components;
@layer utilties;

/* 或者一次定义多个命名的级联层 */
@layer base, components, utilties;

@layer base {
  html {
    font-family: sans-serif;
  }
}

@layer components {
  .btn {
    padding: 1rem;
    border-radius: 0.5rem;
  }
}

@layer utilities {
  .text-center {
    text-align: center;
  }
}

• 定义多个层后，层的先后顺序决定优先级（越后定义，优先级越高）。

• 同一层内，依然按照正常 CSS 规则（如 specificity 和 source order）来决定谁覆盖谁。

• 层与层之间，层的顺序优先于选择器权重。

示例

@layer base {
  .title {
    color: red;
  }
}

@layer components {
  .title {
    color: blue;
  }
}

最终 .title 的颜色是 blue，即使 base 里的规则更早定义、选择器相同，因为 components 层的优先级更高。

对于第三方的 CSS 文件，特别是通过 CDN 提供的 CSS，我们无法修改，可以使用 @layer 来控制优先级。

@import url("base.css") layer(base);
@import url("components.css") layer(components);
@import url("utilities.css") layer(utilities);

优先级顺序总结（从低到高）

1. 用户代理样式（浏览器默认样式）

2. @layer 层。

3. 没有使用 @layer 的普通样式

4. 内联样式

5. !important

使用场景

• 框架开发：如 Tailwind CSS 就广泛使用 @layer 区分 base、components 和 utilities。

• 样式隔离：将第三方库、组件库、业务样式分层，方便管理。

• 覆盖样式更可控：你可以明确知道，哪一层能覆盖哪一层，避免“意外”的覆盖。