随着项目增长，纯 CSS 会受到全局作用域的困扰 — 每个选择器在全局范围内竞争、特异性冲突爆发，没人敢删除某条规则。方法论通过施加结构和命名约定来保持 CSS 的可维护性。
BEM (Block Element Modifier)
一种命名约定，使关系显式化并保持特异性平坦（都是单一 class）：
css
.card { }
{ }
{ }
{ }
<div class="card card--featured">
<h2 class="card__title">...</h2>
</div>
BEM 的价值：class 名称是自文档化的、按约定 scoped、统一的低特异性（无嵌套/id 冲突）。
在标签中直接使用微小的单一用途 class 组合样式：
<div class="flex items-center gap-4 p-6 rounded-lg shadow">...</div>
优点：无命名、无未使用 CSS（已清理）、一致的设计令牌。缺点：HTML 冗长。因其速度和一致性极其流行。
在组件框架中的现代方法 — 将样式 scoped 到某个组件，使其无法泄漏：
import styles from "./Card.module.css"; // class names are hashed/localized
<div className={styles.card}>...</div> // → .Card_card__a1b2 (unique)
这是通过机制而非约定来解决全局作用域问题。
OOCSS — separate structure from skin, reuse objects
SMACSS — categorize rules (base, layout, module, state, theme)
ITCSS — layer CSS by specificity (generic → explicit), low to high
它们都对抗相同的敌人：特异性蔓延、命名冲突、死代码和不可预测的层叠。无论通过命名（BEM）、实用程序类（Tailwind）还是 scoping（Modules），它们都能在大规模团队和代码库增长时保持样式模块化、可删除和无冲突。
大型 CSS 代码库在没有纪律约束的情况下会因全局作用域和特异性冲突而瓦解。
选择并一致地应用一种方法论（当今通常是 BEM、Tailwind 或 scoped CSS Modules）是保持样式模块化、可删除和无冲突的关键，这对团队和代码库的增长至关重要。
一个包含详细解答的 IT 面试题库——从初级到高级。
捐赠