CSS @layer 实战项目组织

@layer实战：tailwind的base/components/utilities三层、设计系统token层/组件层/工具层、第三方库层override、无感知迁移现有CSS到layer · 难度：入门 · +10XP

CSS @layer 级联层 —— 控制样式优先级的终极方案

你有没有遇到过：第三方CSS库覆盖了你写的样式？或者不同的开发者写的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, my-custom;
@import url('bootstrap.css') layer(framework);
@layer my-custom {
  .btn { border-radius: 4px; }     /* 可以覆盖Bootstrap */
}

动手练习

1. 基础练习：把一个网页的CSS拆分为三层——base基础元素样式、components组件样式、utilities工具类。
2. 进阶应用：引入Bootstrap放在framework层，用你的custom层覆盖Bootstrap的部分默认样式。
3. 项目实战：用@layer重构你的项目CSS架构——重置层→设计令牌层→基础样式层→组件层→工具类层。