CSS 架构为何重要

CSS 易于编写，却难以扩展。没有结构时，样式表会变成覆盖规则、特异性冲突和未记录规则交织成的混乱局面，这种情况通常被称为“特异性战争”。

以下迹象表明您的 CSS 需要架构：

• 因为不知道规则会影响什么而不敢删除规则
• 经常使用 !important 覆盖失效的样式
• 不同页面都加载完整且无关的样式表
• 样式只有依赖特定的 HTML 结构才能生效

CSS 架构可以为您提供：

• 可预测性 — 无需阅读所有依赖项，您就知道一条规则的作用
• 可复用性 — 组件可以放置在任何位置
• 可维护性 — 修改一个组件不会破坏其他组件
• 可扩展性 — 新开发人员可以安全地添加样式

良好的 CSS 会分离以下关注点：

• 布局 — 元素的位置
• 排版 — 文本的外观
• 颜色 — 颜色在上下文中的含义
• 状态 — 交互和动态变化

请尽可能降低选择器的特异性。优先使用单一类选择器。高特异性会迫使您使用特异性更高的覆盖规则，甚至使用 !important，从而造成层层叠加的问题。

CSS 组件应该对扩展开放（添加修饰符类），但对修改封闭（不要为了适应变体而编辑基础组件 CSS）。

常见的 CSS 方法论包括：

• BEM — 用于组件隔离的命名约定
• ITCSS — 按特异性排序的文件层
• 原子 CSS/工具优先 — 小型的单一用途类（Tailwind）
• OOCSS — 结构与外观分离
• SMACSS — 对 CSS 规则进行分类

工具优先方式（Tailwind）直接在 HTML 中使用许多小型类来组合样式。基于组件的 CSS 则将样式封装在可复用的类代码块中。两者各有合理的取舍：工具优先方式编写速度更快，而组件 CSS 在大型团队中更加整洁。

CSS 架构的关键在于利用层叠，而不是与它对抗。经过适当排序且特异性较低的样式可以让层叠正常发挥作用，在没有冲突的情况下应用最适用的规则。

良好的 CSS 架构应与设计系统相呼应。CSS 中的组件应与 Figma 中的组件相匹配。CSS 变量中的设计令牌应与设计工具中的令牌相匹配。这种一致性可以减少转换错误。

个人网站不需要 BEM，但由 10 个团队使用的设计系统需要。请根据项目规模调整架构，但应尽早建立约定，而不是事后再补充。

CSS 架构的主要目标是什么？

CSS 架构提供了一种结构，使大型样式表具备可预测性、可复用性和可维护性。低特异性、关注点分离和一致的约定是其基础。常见的方法论包括 BEM、ITCSS 和工具优先方式。合适的架构取决于团队规模和项目规模。