CSS 层级治理：从选择器嵌套到 @layer 的架构方案

一、CSS 层级混乱：样式覆盖的无限战争

前端项目中 CSS 样式覆盖是最常见的"暗坑"。一个组件的样式被全局样式覆盖，开发者本能地用更高优先级的选择器"打补丁"：从 .card 到 .container .card 到 div.container .card，最终走向 !important。这种"优先级军备竞赛"导致样式表越来越不可维护，修改任何一个选择器都可能引发连锁反应。

Tailwind 等原子化 CSS 框架通过内联样式避免了选择器优先级问题，但并非所有项目都适合原子化方案。对于使用组件库 + 自定义样式的项目，CSS 层级治理仍然是核心工程问题。CSS 原生 @layer 规则为这个问题提供了标准化的解决方案。

二、CSS @layer 的优先级模型

@layer 的核心思想是显式声明样式层的优先级顺序，低优先级层的样式无论选择器权重多高，都会被高优先级层的样式覆盖。这从根本上消除了选择器优先级军备竞赛。

flowchart TB
    subgraph "@layer 优先级模型（从低到高）"
        L1["@layer reset — 重置样式"]
        L2["@layer base — 基础/组件库样式"]
        L3["@layer components — 自定义组件样式"]
        L4["@layer utilities — 工具类/覆盖样式"]
        UNL[未分层样式 — 最高优先级"]
    end

    L1 --> L2 --> L3 --> L4 --> UNL

    RULE["规则：高优先级层的样式始终覆盖低优先级层<br/>无论选择器权重如何"] --> L4

    subgraph 传统模型的问题
        OLD["!important 和选择器权重<br/>导致不可预测的覆盖"]
    end

@layer 的声明顺序决定优先级：先声明的层优先级低，后声明的层优先级高。这意味着在文件顶部声明 @layer reset, base, components, utilities; 就确定了全局优先级顺序，后续所有样式规则都遵循这个顺序。

三、CSS @layer 层级治理的工程实践

/* ========== 第一步：声明层级顺序 ==========
   在文件顶部声明所有层的名称和优先级
   先声明的层优先级低，后声明的层优先级高 */

@layer reset, base, components, utilities;

/* ========== 第二步：重置层 — 最低优先级 ========== */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    font-size: 16px;
    line-height: 1.5;
  }
}

/* ========== 第三步：基础层 — 组件库样式 ========== */
@layer base {
  /* 第三方组件库样式放在此层 */
  .ant-btn {
    border-radius: 4px;
    font-weight: 500;
  }

  .ant-input {
    border: 1px solid #d9d9d9;
    padding: 4px 11px;
  }

  /* 基础排版 */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
}

/* ========== 第四步：组件层 — 自定义组件样式 ========== */
@layer components {
  /* 自定义组件样式，覆盖组件库默认样式无需提高选择器权重 */
  .card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 16px;
  }

  /* 即使选择器权重低于基础层，组件层的样式仍然生效 */
  .ant-btn {
    border-radius: 8px; /* 覆盖基础层的 4px，无需 !important */
  }

  /* 组件变体 */
  .card--highlight {
    border-left: 4px solid #1890ff;
  }
}

/* ========== 第五步：工具层 — 最高优先级覆盖 ========== */
@layer utilities {
  /* 工具类：用于快速覆盖，优先级最高 */
  .hidden { display: none !important; }
  .text-center { text-align: center; }
  .mt-4 { margin-top: 1rem; }

  /* 紧急修复：临时覆盖，后续应迁移到组件层 */
  .fix-overlap {
    position: relative;
    z-index: 10;
  }
}

/* ========== 未分层样式 — 比所有层都高 ========== */
/* 仅用于无法归入任何层的特殊场景 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

// ========== 工程化：PostCSS 自动注入 @layer ==========
// postcss.config.js — 自动为 CSS 模块添加 @layer

module.exports = {
  plugins: [
    // 根据文件路径自动分配 @layer
    require("postcss-layer-autofill")({
      // node_modules 中的样式归入 base 层
      base: /node_modules/,
      // src/components 中的样式归入 components 层
      components: /src\/components/,
      // src/styles/utilities 中的样式归入 utilities 层
      utilities: /src\/styles\/utilities/,
    }),
  ],
};

// ========== CSS Modules + @layer 结合 ==========
// 组件样式使用 CSS Modules 避免命名冲突
// 同时通过 @layer 控制优先级

// Card.module.css
@layer components {
  .card {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
  }

  .title {
    font-size: 1.25rem;
    font-weight: 600;
  }
}

四、CSS @layer 的 Trade-offs 分析

浏览器兼容性：@layer 已被所有主流浏览器支持（Chrome 99+、Firefox 97+、Safari 15.4+），但旧版浏览器完全忽略 @layer 规则，样式会按传统优先级模型解析。对于需要支持旧浏览器的项目，@layer 可能导致样式不一致。建议使用 PostCSS 插件在构建时将 @layer 转换为传统选择器权重。

学习成本与团队规范：@layer 引入了新的优先级模型，团队成员需要理解"层优先级 > 选择器权重"的规则。如果有人在未分层区域写样式，会意外获得最高优先级。需要建立规范：所有样式必须归入某个 @layer，禁止在未分层区域写规则。

第三方样式的层级归属：组件库的样式通常通过 CDN 或 npm 引入，无法直接添加 @layer。需要通过 PostCSS 插件在构建时自动注入 @layer，或者使用 @import 语句将组件库样式导入到 base 层：@layer base { @import "antd/dist/antd.css"; }。

!important 在 @layer 中的反转行为：在 @layer 中，!important 的优先级是反转的——低优先级层的 !important 会覆盖高优先级层的 !important。这个反直觉的行为容易导致困惑，建议在 @layer 体系中完全避免使用 !important。

五、总结

CSS @layer 为样式优先级管理提供了标准化的解决方案，通过显式声明层级顺序消除了选择器优先级军备竞赛。四层模型（reset → base → components → utilities）覆盖了大多数项目的样式分层需求。落地时需要关注浏览器兼容性、团队规范建立、第三方样式归属和 !important 的反转行为。建议配合 PostCSS 自动化注入 @layer，降低手动维护成本。@layer 不是万能药，但它让 CSS 架构从隐式优先级博弈转向了显式层级治理。