一、先搞懂为啥要聊这个问题

做过前端的人都有过这种崩溃时刻：好不容易写好的页面样式，一引入第三方UI库、或者同事写的公共样式，自己写的样式就莫名失效了。最开始可能觉得是自己写错了，反复检查后发现没毛病，最后只能靠加选择器权重救场——比如把.btn改成.card .btn，不够就再加.page .card .btn，再不行就上!important。结果到项目后期，样式表乱得像一锅粥，改个样式得翻好几层选择器，新同学接手更是一脸懵。

其实这一切的根源，都是没搞清楚「样式优先级」的逻辑，以及怎么合理管理它。直到CSS的@layer规则出现，才给了我们一个系统解决这个问题的办法，不用再陷入“加权重→失效→再加权重”的死循环。

二、先搞懂CSS样式优先级的底层逻辑（不然用不好@layer）

要学会用@layer，得先搞明白浏览器判断“哪个样式生效”的规则，不然会用得稀里糊涂。

2.1 浏览器的优先级判断顺序（从高到低）

浏览器判断样式优先级，是分等级的，只有前一个等级没区分出结果，才会看下一个等级：

  1. 内联样式（直接写在元素style属性里的）
  2. 选择器权重（比如ID选择器比类选择器权重高）
  3. 声明顺序（同权重的样式，后写的会覆盖先写的）
  4. 样式来源（比如用户自定义样式>浏览器默认样式）

以前的问题就出在第3和第4条：第三方库的样式往往是先引入的，但如果它的选择器权重和你写的一样，后写的业务样式会覆盖它；但如果第三方库的选择器权重更高（比如用了ID），或者它加了!important，你就得加更高的权重才能覆盖，这就导致了死循环。

2.2 @layer到底解决了什么？

@layer是CSS3新增的规则，它的核心作用是：给样式分组，自定义分组的优先级顺序。

举个通俗的例子：你可以把所有样式分成几个组，比如「第三方库样式组」「公共组件样式组」「业务页面样式组」，然后你自己规定：业务组的优先级最高，公共组次之，第三方组最低。这样不管第三方组的样式写得多么靠后、权重多高，只要它属于优先级低的组，业务组的样式都能覆盖它，反过来也一样——第三方组的样式不会随便覆盖业务组的。

三、@layer的基础用法（先看简单示例）

为了让大家都能看懂，所有示例都用同一个技术栈：原生CSS+HTML，不用任何框架，避免额外的学习成本。

首先看一个最基础的@layer用法：

/* 定义三个分组，顺序是：第三方 < 公共 < 业务 */
@layer third-party, common, business;

/* 第三方组的样式 */
@layer third-party {
  .btn {
    background: red; /* 第三方按钮是红色 */
    padding: 8px;
  }
}

/* 公共组的样式 */
@layer common {
  .btn {
    background: blue; /* 公共按钮是蓝色 */
    padding: 10px;
  }
}

/* 业务组的样式 */
@layer business {
  .btn {
    background: green; /* 业务按钮是绿色 */
    padding: 12px;
  }
}

<button class="btn">测试按钮</button>

这个按钮最终会显示绿色，因为business组的优先级最高。如果我们把分组的定义顺序反过来：@layer business, common, third-party;，那按钮就会显示红色。

这里要注意：分组的优先级是按定义顺序来的，先定义的优先级低，后定义的优先级高。

四、实际项目中的@layer用法（解决真实问题）

上面的示例太简单，真实项目里的第三方样式、公共样式都是单独的CSS文件，不是写在一个文件里的。我们来模拟一个真实的项目场景：

4.1 场景1：引入第三方UI库，覆盖默认样式

假设我们项目里引入了一个第三方的按钮库，它的样式是单独的CSS文件：third-party.css，我们要覆盖它的默认样式，同时不想改第三方文件。

首先，我们的HTML结构：

<!-- 引入第三方样式 -->
<link rel="stylesheet" href="third-party.css">
<!-- 引入我们自己的公共样式 -->
<link rel="stylesheet" href="common.css">
<!-- 引入我们的业务样式 -->
<link rel="stylesheet" href="business.css">

首先看第三方的third-party.css（我们不能改这个文件）：

/* 第三方按钮的默认样式，用了类选择器，权重不高 */
.btn {
  background: #e0e0e0;
  color: #333;
  padding: 6px 12px;
  border-radius: 4px;
}

然后是我们的common.css：

/* 把所有公共样式都放到common组 */
@layer common {
  .btn {
    background: #2196f3; /* 公共按钮改成蓝色 */
    color: white;
    padding: 8px 16px;
  }
}

然后是我们的business.css：

/* 把所有业务样式都放到business组 */
@layer business {
  .btn {
    background: #4caf50; /* 业务按钮改成绿色 */
    padding: 10px 20px;
  }
}

这时候，我们需要在项目的主CSS文件（比如main.css）里定义分组的优先级：

/* 定义分组优先级：第三方 < 公共 < 业务 */
@layer third-party, common, business;

/* 引入第三方样式到third-party组 */
@import url('third-party.css') layer(third-party);

/* 引入公共样式到common组 */
@import url('common.css') layer(common);

/* 引入业务样式到business组 */
@import url('business.css') layer(business);

这样，不管第三方样式、公共样式、业务样式的引入顺序怎么变，只要分组的优先级是third-party < common < business，业务按钮就会显示绿色，公共按钮（不用业务样式的地方）显示蓝色，完美解决了覆盖问题。

4.2 场景2：第三方样式加了!important，也能覆盖

如果第三方样式加了!important，以前的办法只能给业务样式也加!important，但用@layer就不用。

修改第三方的third-party.css：

.btn {
  background: #e0e0e0 !important; /* 第三方加了!important */
  color: #333;
  padding: 6px 12px;
  border-radius: 4px;
}

修改我们的business.css：

@layer business {
  .btn {
    background: #4caf50; /* 业务样式没加!important */
    padding: 10px 20px;
  }
}

这时候按钮还是会显示绿色，因为@layer的优先级比!important还高！这是@layer最强大的地方——它完全打破了以前的优先级逻辑，只要分组优先级高，不管你加不加!important，高分组的样式都会生效。

4.3 场景3：嵌套分组，更细粒度的管理

如果项目比较大，公共样式里还分了「组件样式」和「工具样式」，我们可以用嵌套分组来管理。

修改main.css的分组定义：

/* 主分组优先级：第三方 < 公共 < 业务 */
@layer third-party, common, business;

/* 公共分组里再分两个子分组：组件 < 工具 */
@layer common {
  @layer component, utility;
}

然后修改common.css：

/* 组件样式放到common.component组 */
@layer common.component {
  .btn {
    background: #2196f3;
    color: white;
    padding: 8px 16px;
  }
}

/* 工具样式放到common.utility组 */
@layer common.utility {
  .btn {
    background: #ff9800; /* 工具类按钮是橙色 */
    padding: 12px 24px;
  }
}

这样，组件样式和工具样式的优先级是common.component < common.utility，如果一个按钮同时加了.btn和.utility-btn（工具类），就会显示橙色。

五、@layer的应用场景、优缺点和注意事项

5.1 应用场景

  1. 引入第三方UI库、图表库等，需要覆盖默认样式，同时不想改第三方文件；
  2. 项目规模大，样式文件多，需要统一管理不同来源样式的优先级；
  3. 多人协作的项目，不同人写的样式经常互相覆盖，需要明确的优先级规则；
  4. 旧项目重构，不想大规模修改原有的样式，用@layer逐步调整优先级。

5.2 优缺点

优点：

  1. 从根本上解决了样式优先级冲突的问题，不用再加选择器权重和!important；
  2. 样式结构更清晰，新同学接手项目能快速搞懂样式的来源和优先级；
  3. 可以灵活调整分组的优先级，不用修改具体的样式代码；
  4. 支持嵌套分组，适合复杂项目的细粒度管理。

缺点：

  1. 浏览器兼容性：虽然现在主流浏览器（Chrome、Firefox、Edge、Safari 15.4+）都支持，但如果项目需要兼容旧浏览器（比如Safari 15.4以下），需要加降级方案；
  2. 学习成本：需要先理解原来的优先级逻辑，再理解@layer的优先级逻辑，刚开始可能会搞混；
  3. 分组定义的维护：如果项目分组太多，需要维护分组的定义顺序，不然会出现优先级混乱。

5.3 注意事项

  1. 分组的优先级顺序一定要提前规划好，一旦项目上线后再修改，可能会导致大量样式失效；
  2. 同组内的样式，还是会遵循原来的优先级规则（选择器权重、声明顺序），所以同组内的样式冲突还是要靠原来的办法解决；
  3. 内联样式的优先级还是最高的，@layer不能覆盖内联样式，所以尽量不要用内联样式；
  4. 降级方案：如果需要兼容旧浏览器，可以用CSS的@supports规则来判断浏览器是否支持@layer，不支持的话就用原来的选择器权重办法；
  5. 不要滥用@layer，如果项目很小，样式冲突不多，就没必要用，反而会增加项目的复杂度。

六、文章总结

@layer的出现，彻底改变了我们管理样式优先级的方式，不用再陷入“加权重→失效→再加权重”的死循环。它的核心是给样式分组，自定义分组的优先级顺序，不管第三方样式的权重多高、加不加!important，只要分组优先级高，就能覆盖。

在实际项目中，我们可以把样式分成第三方、公共、业务等分组，明确分组的优先级顺序，然后把不同来源的样式放到对应的分组里，这样就能实现样式的有序管理。同时，我们也要注意@layer的浏览器兼容性和分组的维护，避免出现新的问题。

只要合理使用@layer，就能让项目的样式结构更清晰，维护更简单，开发效率更高。