CSS @layer 级联层

@layer级联层：控制样式优先级（layer顺序>选择器权重）、@layer base/components/utilities分层策略、Tailwind CSS的layers实现、重置第三方样式 · 难度：入门 · +10XP

CSS @layer —— 控制样式优先级的终极武器

你有没有遇到过：第三方CSS库覆盖了你写的样式，或你的重置样式不小心被后面的代码覆盖了？@layer就是用来解决谁的样式优先这个问题的。

基本概念

@layer允许你把CSS分成不同的层。后声明的层优先级更高，但每个层内的选择器权重规则照常。

@layer base, components, utilities;
@layer base {
  h1 { font-size: 2rem; }  /* 基础样式，优先级最低 */
}
@layer components {
  .card { padding: 20px; }  /* 组件样式 */
}
@layer utilities {
  .mt-0 { margin-top: 0; }  /* 工具类，优先级最高——覆盖一切 */
}

控制第三方库

@layer framework, custom;
@import url('bootstrap.css') layer(framework);
@layer custom {
  .btn { border-radius: 4px; }  /* 轻松覆盖Bootstrap */
}

动手练习

1. 基础练习：把一个网页CSS拆分为base、components、utilities三层。
2. 进阶应用：引入Bootstrap放在framework层，用custom层覆盖它。
3. 项目实战：用@layer重构项目CSS架构——重置层→变量层→基础层→组件层→工具层。