随着项目增长,纯 CSS 会受到全局作用域的困扰 — 每个选择器在全局范围内竞争、特异性冲突爆发,没人敢删除某条规则。方法论通过施加结构和命名约定来保持 CSS 的可维护性。
BEM (Block Element Modifier)
一种命名约定,使关系显式化并保持特异性平坦(都是单一 class):
css
.card { } /* Block — standalone component */
.card__title { } /* Element — a part of the block (double underscore) */
.card__button { }
.card--featured { } /* Modifier — a variant (double dash) */
html
...
