一、什么是CSS Layer

CSS Layer（层）是CSS Cascade（级联）规范中的一个重要特性，于2022年被主流浏览器广泛支持。它允许开发者显式地定义CSS规则的优先级顺序，为复杂样式管理提供了更精细的控制手段。

二、为什么需要CSS Layer

在传统CSS中，样式优先级主要由以下因素决定（从高到低）：

  1. 内联样式（inline styles）。

  2. !important 标记的规则。

  3. 特异性（specificity）。

  4. 源代码顺序。

这种机制在复杂应用中常常导致"特异性战争"，开发者不得不使用更复杂的选择器 !important 来覆盖样式，造成代码难以维护。

三、如何定义和使用Layer

1. 使用@layer规则定义层
/* 方法一：直接在@layer块内定义样式 */
@layer utilities {
  .text-center {
    text-align: center;
  }
}

/* 方法二：先声明层顺序，后添加样式 */
@layer base, components, utilities;

@layer components {
  .button {
    padding: 0.5rem 1rem;
  }
}
2. 层的优先级顺序

在层叠层中声明 CSS 时，优先顺序由声明层的顺序决定。在任何层之外声明的 CSS 样式都会按照声明的顺序合并到一个未命名的层中，就好像它是最后声明的层一样。

对于相互竞争的普通（即非 !important）样式，后面的层优先于前面定义的层。但是，对于标记为 !important 的样式，顺序则相反，较早层中的同名 !important 样式优先于后续层或者任何层之外声明的 !important 样式。

无论在哪一层，内联样式都优先于所有作者样式。

当在不同层中定义相同的选择器时，优先级高的层中的规则会覆盖优先级低的层中的规则，不管选择器的特异性如何。

简言之：

  • 在逗号分隔的层声明列表中，后面的层优先级更高。

  • 当使用多个独立的@layer声明时（而不是逗号分隔的列表），优先级规则依然是：后声明的层具有更高的优先级。

  • 层顺序一旦创建，就无法更改。

  • 标记为 !important 的样式，优先级与声明层顺序相反（如果在同一层，后声明的 !important样式会覆盖同层先声明的同名样式）。

示例一：
@layer base, components, utilities;
/* 优先级：base < components < utilities */
示例二：
<style>
    /* 使用逗号分隔的层声明 - 从左到右优先级递增 */
    @layer base, components, utilities;

    /* base层 - 最低优先级 */
    @layer base {
        .element {
            color: red !important; /* 标记为!important */
        }
    }

    /* components层 - 中等优先级 */
    @layer components {
        .element {
            color: blue;
        }
    }

    /* utilities层 - 最高优先级 */
    @layer utilities {
        .element {
            color: green;
        }
    }

    /* 再添加一个普通样式（不在任何层中） */
    .element {
        color: purple !important;
    }
</style>
<div class="element">这段文字的颜色会是红色</div>
3. 匿名层

没有明确分配到层的样式会被放入一个隐式的匿名层中，其优先级高于所有显式声明的层。

@layer myLayer {
  .box { color: blue; }
}

/* 这个样式在匿名层，优先级高于myLayer */
.box { color: red; }
4. 嵌套层

层可以嵌套，形成层级结构：

@layer framework {
  @layer base {
    body { margin: 0; }
  }
  @layer components {
    .btn { padding: 1rem; }
  }
}

四、CSS Layer与特异性的关系

  1. 在同一层内，规则优先级仍由特异性决定。

  2. 在不同层之间，层优先级决定了规则优先级，特异性不再重要。

  3. !important 标记的规则会覆盖所有层中的普通规则（同名css，比如color，font-size），且优先级(!important)与层声明顺序相反。

  4. 同一个层内，后声明的 !important样式会覆盖同层先声明的同名样式。

下面是层优先级覆盖选择器特异性的示例：

<style>
    /* 第三方库样式 - framework层 */
    @layer framework {
        #id .my-button { color: green; }
        body .my-button { color: orange; }
    }

    /* 自定义样式 - components层 */
    @layer components {
        .my-button { color: red; }
    }
</style>
<body>
    <div id="id">
          <button class="my-button">I am a red button</button>
    </div>
</body>

代码解析：components层framework层之后声明，最终得到结果：

  • 所有应用了 .my-button 类的元素都将显示为红色。

  • 即使 framework 层中的选择器具有更高的特异性（比如：#id .my-button 或者 body #id div.my-button）。

实际应用价值

特性（在不同层之间，层优先级决定了规则优先级，特异性不再重要）解决了前端开发中的一个常见痛点：

  • 传统CSS：要覆盖第三方库的高特异性样式，开发者常常需要使用相同或更高特异性的选择器，或者依赖 !important。

  • 使用Layer：只需将自定义样式放在后声明的层中，即使选择器非常简单，也能轻松覆盖库样式。

注意事项

  • 只有当规则位于不同层时，层优先级才会超越特异性。

  • 在同一层内，仍然遵循传统的特异性和源码顺序规则。

  • 如果在高优先级层中没有匹配的规则，浏览器会回退到低优先级层中的规则，此时特异性规则会起作用。

五、Layer与传统CSS样式覆盖的区别

传统CSS的样式覆盖遵循以下规则：

  1. 特异性(Specificity)：特异性高的选择器优先（ID选择器 > 类选择器 > 元素选择器）。

  2. 源码顺序：在特异性相同时，后声明的规则覆盖先声明的规则。

  3. !important：标记了 !important 的规则优先级最高。

CSS Layer引入了一个全新的优先级维度，它在特异性和源码顺序之前起作用：

  1. 首先确定规则所在的层。

  2. 层优先级决定了规则的基本优先级（后声明的层优先级更高）。

  3. 在同一层内，再按照传统的特异性和源码顺序规则确定优先级。

关键区别点

  1. 不受特异性影响：在不同层之间，层优先级比选择器特异性更重要。在传统CSS中，要覆盖高特异性选择器需要使用相同或更高特异性的选择器。

  2. 可预测性更高：CSS Layer允许开发者显式控制样式覆盖关系，而不必依赖复杂的选择器或 !important。

  3. 模块化更好：可以将不同来源的样式（如第三方库、框架、自定义样式）封装在不同的层中，清晰地控制它们之间的优先级关系。

六、实际应用场景

1. 第三方库样式管理
/* 先引入第三方库样式 */
@import url('bootstrap.css') layer(framework);

/* 然后定义自己的组件样式 */
@layer components {
  .my-button {
    /* 这个样式会覆盖Bootstrap中的同名样式，无需使用高特异性选择器 */
  }
}
说明

  • 传统方式：要覆盖Bootstrap等库的样式，常常需要编写特异性更高的选择器（div.my-button 或 .container .my-button）或使用 !important。

  • 使用Layer：只需将自定义样式放在后声明的层中，即使选择器特异性较低，也能轻松覆盖库样式。

2. 主题切换
@layer base, theme, components;

@layer base {
  /* 基础样式 */
}

@layer theme {
  /* 主题相关样式 */
  :root {
    --primary-color: blue;
  }
}

@layer components {
  /* 组件样式 */
}
 3. 原子化CSS与语义化CSS结合
@layer utilities, semantic;

@layer utilities {
  /* Tailwind等原子类 */
  .text-center { text-align: center; }
}

@layer semantic {
  /* 语义化组件 */
  .card { border-radius: 8px; }
}

七、浏览器支持

点击《Can I Use》查看layer的更多兼容性信息。

八、最佳实践

  1. 从低优先级到高优先级声明层：基础样式、框架样式 -> 组件样式 -> 工具类 -> 自定义覆盖样式。

  2. 合理使 @layer 可以减少对 !important 的依赖。

  3. 在引入第三方库时，使用 @layer 将其样式封装，避免样式冲突。

  4. 为团队建立明确的层命名和使用规范。

通过使用CSS Layer，您可以更好地组织和管理样式，减少样式冲突，提高代码的可维护性。