2026年3月18日前端1 分钟阅读

层叠层与设计 Token：主题切换不必靠 !important

用 cascade layers 理顺样式优先级，用 CSS 变量承载墨色主题的浅/深色切换。

样式一乱，多半不是「少写了工具类」，而是优先级与语义没有分层。@layer 和设计 token（CSS 变量）正好解决这两件事。

Token 先定语义

不要把组件直接绑死到具体色值，先定语义名：

:root {
  --bg: #f3f1ec;
  --ink: #1c1b19;
  --accent: #245b6a;
  --muted: #5c5954;
}
 
[data-theme="dark"] {
  --bg: #161513;
  --ink: #eceae4;
  --accent: #7eb6c4;
  --muted: #a3a098;
}
 
body {
  background: var(--bg);
  color: var(--ink);
}

组件只消费 --accent，不关心今天是浅色还是深色。

Cascade Layers 理顺来源

@layer reset, tokens, base, components, utilities;
 
@layer base {
  a {
    color: var(--accent);
  }
}
 
@layer components {
  .prose a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}

未分层的样式会压过 layer 内样式——这点要记住，避免「我写了 layer 怎么没生效」。

和 Tailwind 一起用

Tailwind v4 很适合把 token 映射进主题。关键是：品牌色只有一套语义变量，工具类指向变量，而不是在组件里散落 #245b6a。

小结

Token 负责「是什么颜色」，Layer 负责「谁说了算」。两者对齐后，主题切换和样式覆盖会安静很多。