BEM 是最值得坚持的 CSS 命名规范，因其三段式结构（block__element--modifier）天然隔离作用域、避免样式污染、命名即含义，且易于理解、复用和维护。
为什么 BEM 是最值得坚持的 CSS 命名规范
因为它的结构天然隔离作用域，避免样式污染，且命名即含义。不用猜 .btn-primary 是按钮还是容器，也不用翻源码确认 .list-item__title--large 是标题还是副标题——BEM 的三段式：block__element--modifier 直接告诉你层级和状态。
常见错误是把 BEM 当成“加下划线就行”，比如写成 header__nav__link（嵌套过深）或 button--active--disabled（多个 modifier 冲突）。BEM 要求一个元素只属于一个 block，且 modifier 只修饰 block 或 element，不链式叠加。
-
search-form✅ 是 block；search-form__input✅ 是其子元素；search-form--compact✅ 是其状态变体 -
search-form__input--error✅ 合理；但search-form__input--error--focused❌ 应拆为两个独立 modifier 类，用 JS 控制增删 - 避免在 class 名中出现位置词（如
left-sidebar）、内容词（如home-page-banner），改用功能语义（sidebar、hero-banner）
如何用 CSS 自定义属性配合命名提升可维护性
命名规范不止是 class 名，CSS 变量（:root 中的 --color-primary）同样需要统一前缀和语义层级。否则很快会出现 --main-color、--primary、--brand-blue 并存，改一个色值要全局搜三次。
推荐按维度分组 + 语义化后缀：--color-text-primary、--space-unit-sm、--radius-card。这样既能被 IDE 自动补全，也能在 DevTools 中快速过滤。
立即学习“前端免费学习笔记（深入）”；
- 所有变量必须带作用域前缀，禁止裸名如
--blue或--small - 数值类变量优先用抽象单位（
--space-unit-xs）而非物理单位（--margin-8px），方便主题切换时批量缩放 - 组件级变量应限定在组件选择器内，例如
.card { --card-padding: var(--space-unit-md); }，避免污染全局
哪些 class 命名会直接导致重构灾难
这类名字看似直观，实则锁死 HTML 结构、阻碍复用，且无法通过搜索准确定位使用范围：
-
red-text：颜色绑定太死，换主题时得全局替换，还可能误伤其他红色文本 -
float-left：描述表现而非意图，Flex/Grid 普及后这个 class 就只剩语义噪音 -
header-2024：含年份或版本号，下次改版就得改 class 名，HTML 和 CSS 同步改，CI 构建可能报错 -
js-toggle-menu：混入行为逻辑，违反关注点分离；JS 应该靠 data 属性（data-js="toggle-menu"）绑定，而非依赖 class
判断标准很简单：如果删掉这个 class，光看名字完全无法还原它本该承担的 UI 角色，那它就失败了。
PostCSS 插件能帮你守住命名底线吗
能，但只在工程化链路完整时起效。stylelint 配合 stylelint-selector-bem-pattern 插件，可以强制校验 BEM 格式；postcss-bem-linter 能检测 block/element/modifier 的层级合法性。
不过工具只是守门员，不是教练。它不会告诉你 user-card__avatar--large 是否真需要 “large” 这个 modifier，也不会阻止你把一个 modal block 错写成 popup——语义一致性还得靠团队约定和 Code Review。
module.exports = {
plugins: [
require('stylelint')(),
require('stylelint-selector-bem-pattern')({
preset: 'bem',
componentName: /^[a-z][a-zA-Z0-9]+$/,
componentNameStrict: true
})
]
};
BEM 不是银弹，但它是目前最易落地、最容错、最容易让新成员三天内看懂样式结构的方案。真正难的不是写对命名，而是每次写新 class 时，愿意多花三秒想清楚：它代表什么，会被谁复用，半年后别人看到会不会皱眉。
