CSS DEVELOPMENT LAB · 19

Cascade & @layer

CSS 大项目最容易失控的地方，不是 Grid 或 Flex，而是“到底哪条规则生效”。 本实验用按钮、卡片和工具类，理解层叠顺序、Specificity、源码顺序与 @layer。

REAL PROBLEM

选择器战争是怎么开始的

当组件样式、页面样式、工具类互相覆盖时，很多项目会不断增加选择器权重， 最后出现 `.page .section .card .button` 甚至大量 `!important`。

01

源码顺序

权重相同的规则，通常后写的会覆盖前面的。

.button { color: black; }
.button { color: white; }
02

Specificity

更具体的选择器，可能压过后面更简单的规则。

.card .button { ... }
.button { ... }
03

!important

短期能解决问题，长期很容易继续升级冲突。

.button {
  color: white !important;
}

LAYER ORDER

先把优先级顺序写在 CSS 顶部

本实验把样式分成 reset、base、components、utilities 四层。 对普通声明来说，后面的 Layer 优先级更高。

04 utilities 最高的普通 Layer 优先级
03 components Button / Card / Navigation
02 base body / headings / links
01 reset 最低的普通 Layer 优先级

PRACTICAL DEMO

组件样式 + 工具类

三个按钮都使用同一个 `.button` 组件。工具类放在 utilities Layer， 可以用简单类名覆盖组件的一部分，而不需要写更长的选择器。

默认按钮 工具类：弱化 工具类：加宽 
@layer reset, base, components, utilities;

@layer components {
  .button {
    background: #171717;
    color: white;
  }
}

@layer utilities {
  .u-quiet {
    background: #f1f1ed;
    color: #171717;
  }
}

SPECIFICITY

Layer 不能替代对权重的理解

`@layer` 可以管理“不同来源模块之间”的优先级，但同一个 Layer 内部， 仍然要遵守 Specificity 和源码顺序。

p元素选择器低
.button类选择器中
#heroID 选择器高
style=""内联样式更高

PROJECT ARCHITECTURE

适合长期维护的分层方式

reset

浏览器基础重置

box-sizing、margin 清理、图片默认行为。

base

全局基础样式

body、标题、链接、排版和 Design Tokens。

components

可复用组件

Button、Card、Tabs、Accordion、Navigation。

utilities

小型覆盖工具

隐藏、对齐、间距、特殊状态等小范围调整。

IMPORTANT DETAIL

不要把 @layer 当成“万能覆盖器”

① 未放进任何 Layer 的普通样式，会比 Layer 内普通样式优先。

② !important 的 Layer 优先顺序与普通声明不同，不建议拿它做日常覆盖策略。

③ 最好的目标仍然是：选择器简单、职责明确、覆盖关系可以预测。