BEM是解决样式污染、协作低效、重构成本高的事实标准，采用block__element--modifier三段式命名，强调组件边界与语义化，禁用嵌套元素和链式modifier，CSS变量需带作用域前缀并按维度分组。
BEM 是当前最可靠、最易落地的 CSS 类名命名规范，它不是“可选方案”，而是解决样式污染、团队协作低效、重构成本高的事实标准。其他方法（如 OOCSS、SMACSS）偏架构层，BEM 直接作用于每个 class，能立刻见效。
怎么写 BEM：三段式结构必须严格遵守
BEM 的核心是 block__element--modifier 三段式，每一段有明确语义和边界：
-
block：独立、可复用的功能单元，如search-form、user-card—— 它不依赖父容器，也不关心内部结构 -
element：仅属于某个 block 的子成分，用双下划线连接，如search-form__input、user-card__avatar—— 不允许嵌套元素（search-form__input__icon❌） -
modifier：表示状态或变体，用双连字符连接，如search-form--compact、user-card__avatar--large—— 一个元素最多带一个 modifier，禁止链式叠加（user-card__avatar--large--active❌）
为什么不用 .red、.left-nav 这类名字？
这类命名看似直观，实则制造维护陷阱：
-
.red-text：颜色绑定死，换主题时全局搜索替换，极易误伤（比如日志里也有 “red” 字符串） -
.left-sidebar：描述位置而非功能，一旦设计改成顶部抽屉，这个 class 就名不副实，且无法通过语义定位使用范围 -
.header-2024：含年份，下次改版就得改 HTML + CSS + JS 多处引用，CI 可能因 class 缺失而报错 -
.js-toggle-menu：混入行为逻辑，违反关注点分离；JS 应该靠data-js="toggle-menu"绑定，而非靠 class 判断
CSS 自定义属性（:root 变量）也要遵循命名规范
变量命名混乱比 class 更隐蔽、更难修复 —— 它们不会报错，但会让主题切换、夜间模式、缩放适配彻底失控：
立即学习“前端免费学习笔记（深入）”；
- 必须带作用域前缀：
--color-text-primary✅，--primary❌，--blue❌ - 按维度分组 + 语义后缀：
--space-unit-sm、--radius-card、--shadow-lg - 数值类优先用抽象单位：
--space-unit-md✅（方便整体缩放），--margin-16px❌（硬编码像素） - 组件级变量应限定在选择器内：
.card { --card-padding: var(--space-unit-md); }避免污染全局
最容易被忽略的一点：BEM 不是“加下划线就行”，而是对组件边界的认知训练。写错一个 __ 或 -- 并不可怕，可怕的是把 header__nav__link 当成合法写法 —— 这说明你还没真正接受“一个元素只属于一个 block”的约束。这种思维惯性，会在三个月后拖慢整个迭代节奏。
