别再用 !important 啦，CSS 新神器 @layer 更优雅！
在日常前端开发中，你是否遇到过这些场景：
- 样式被莫名覆盖，不得不加 !important
- 第三方库样式权重太高，很难覆盖
- 多人协作时，CSS 优先级混乱，改一处炸一片
如果你还在用 !important“硬刚”，那这篇文章可能会彻底改变你的写法 —— CSS 原生分层能力：@layer。
一、@layer 是干嘛的？
一句话：控制 CSS 优先级（层级），避免“样式打架”。
在没有 @layer 之前，CSS 优先级主要靠： • 选择器权重（specificity） • 写的顺序（后写覆盖前写） • !important（核武器⚠️）
问题是，在大型项目里，这套规则会失控，比如：
.button { color: blue; }
/*某个组件*/
.container .button { color: red; }
你会发现：
- 越写越复杂
- 选择器越来越长
- 最后开始滥用 !important
二、@layer 核心机制
@layer 引入了“层级优先级”，比选择器权重更高
示例：
@layer base {
button {
color: blue;
}
}
@layer components {
.button {
color: red;
}
}
即使 .button 权重更高：
components 层仍然覆盖 base 层
三、层级优先级规则（重点🔥）
优先级顺序：
!important
↓
@layer（层级顺序）
↓
选择器权重
↓
源码顺序
结论：
layer > specificity（权重）
这点是面试非常爱问的。
四、layer 顺序怎么控制？
方法1：声明顺序
@layer base, components, utilities;
顺序越靠后，优先级越高
方法2：分文件也能控制（工程价值很大）
@layer base {
/*reset.css*/
}
@layer components {
/*button.css*/
}
即使文件加载顺序乱了，也不会乱！
五、结合现代工程（重点）
这个特性其实是为这些东西准备的：
1.设计系统（Design System）
@layer reset, base, theme, components, utilities;
结构非常清晰： • reset（浏览器重置） • base（基础样式） • theme（主题） • components（组件） • utilities（工具类）
2.和 Tailwind 强绑定
像 Tailwind CSS：
@tailwind base;
@tailwind components;
@tailwind utilities;
底层其实就是：
@layer base {}
@layer components {}
@layer utilities {}
Tailwind 能不冲突，就是靠 layer
3.微前端
项目结构如下： • qiankun • 多子应用
痛点：样式污染
用 @layer 可以做到：
@layer app1 { ... }
@layer app2 { ... }
从“优先级层面”隔离，而不是只靠命名空间
六、和传统方案对比
| 方案 | 问题 |
|---|---|
| BEM | 命名复杂 |
| !important | 破坏规则 |
| CSS Modules | 解决作用域，不解决优先级 |
| @layer | ✅ 从根解决优先级问题 |
七、进阶用法（你可以装一波的）
1.未声明 layer 的样式
.button { color: green; }
默认在 最高优先级层，会覆盖所有 layer
2.layer + import
@import url('base.css') layer(base);
@import url('components.css') layer(components);
非常适合拆包
八、另外还有其他几个“新 CSS”特性
- :is() / :where()（权重控制神器）
- @scope（未来替代 scoped CSS）
- container queries（容器查询🔥）
- :has()（父选择器，超强）
你还知道哪些特性？欢迎评论区分享、交流。
