AI 摘要：本文由 Victor Ayomipo 撰写，深入探讨了 CSS 中特异性（specificity）控制的复杂性及其解决方案。文章详细分析了三种主要的 CSS 特异性管理策略：BEM（Block-Element-Modifier）、Utility Classes（实用类）和 CSS Cascade Layers（层叠层）。通过对比它们的优缺点、使用场景及特异性控制方式，作者旨在帮助开发者理解并选择适合项目需求的 CSS 组织方式，同时强调保持低特异性的重要性，避免使用 !important 等不良实践。

1. 引言：CSS 特异性的挑战
• 介绍了 CSS 特异性导致的样式应用问题，如样式覆盖失败的常见困扰。
• 强调理解特异性比依赖 !important 更可持续，提出特异性问题是 CSS 开发中的核心挑战之一。

2. 特异性基础（Specificity 101）
• 解释了特异性如何通过浏览器层叠算法决定样式优先级。
• 通过示例（如 .cart-button 和 .cart-button.sidebar）展示了项目扩展中特异性冲突的加剧。
• 概述了三种策略（BEM、Utility Classes、Cascade Layers）在控制特异性上的不同思路。

3. 作者与特异性的关系
• 分享了作者对特异性理解的演变，从基础规则到深入研究 CSS 层叠机制。
• 通过实际代码案例，展示了特异性冲突（如旧代码与新样式的优先级问题）及解决时的困境。
• 提出个人原则：保持低特异性，避免复杂选择器链，必要时重构代码。

4. BEM：经典系统
• 详细介绍了 BEM 的命名方法论（Block、Element、Modifier），强调其通过显式层级降低特异性。
• 优点：代码可预测，组件隔离，特异性低且一致。
• 缺点：类名冗长，复用性受限，命名困难，需灵活应用（如结合全局类）。

5. Utility Classes：通过回避特异性
• 描述了 Utility Classes（原子化 CSS）的理念，即通过单一功能的类保持最低特异性（如 p-2、text-red）。
• 优点：快速开发，可预测性高，覆盖简单。
• 缺点：代码可读性差，HTML 冗长，品牌色调整等全局变更困难，父子关系处理受限。

6. Cascade Layers：设计上的特异性控制
• 介绍了 CSS Cascade Layers 的强大功能，通过 @layer 定义样式优先级，超越传统特异性规则。
• 优点：提供绝对控制力，可覆盖高特异性选择器（如 ID 选择器）而无需 !important。
• 缺点：特异性仍起作用，!important 行为特殊，易被滥用导致层级复杂。

7. 三者对比
• 通过表格形式对比了 BEM、Utility Classes 和 Cascade Layers 在特异性控制、代码可读性、组织方式等多个维度的表现。
• 最佳场景：BEM 适合设计系统，Utility Classes 适合快速构建，Cascade Layers 适合遗留代码或复杂项目。

8. 三者交集与结合

• 提出 Cascade Layers 可作为协调者，与 BEM 或 Utility Classes 结合使用，而 BEM 与 Utility Classes 结合则易冲突。
• 作者偏好 Utility Classes 结合 Cascade Layers，但认可 BEM 的价值，强调选择取决于个人与团队需求。

9. 结论
• 总结 Cascade Layers 是近年来最强大的 CSS 特性，但它与 BEM 和 Utility Classes 的本质不同（特性 vs 方法论）。
• 建议保持低特异性，并结合 Cascade Layers 设置样式优先级，以实现更高效的 CSS 管理。

Smashing Magazine

CSS Cascade Layers Vs. BEM Vs. Utility Classes: Specificity Control — Smashing Magazine

CSS can be unpredictable — and specificity is often the culprit. Victor Ayomipo breaks down how and why your styles might not behave as expected, and why understanding specificity is better than relying on `!important`.