BEM规范通过__和--分隔符实现高可定位性：__表示元素，--表示修饰符，禁止省略或混用；组件名须唯一具象，子组件应独立声明而非嵌套命名，配合工具链自动编译或CSS Modules保障一致性。
为什么直接套用 .header .content .footer 会越写越乱
因为这类命名不带上下文，一旦页面嵌套变深或组件复用，.header 到底是整个页面的 header，还是某个卡片里的 header？CSS 选择器权重和覆盖行为会变得不可控，后期改一个样式可能牵出三个 bug。
真正起作用的不是“语义化”，而是“可定位性”——你能一眼从类名反推出它属于哪个组件、处于什么状态、有没有修饰变体。
- 避免全局通用名：
.btn改成.search-form__submit-btn - 组件名必须唯一且具象：
.user-card比.card更安全 - 所有类名必须以组件名为前缀，不跨组件共享样式
__ 和 -- 不是装饰，是语法分隔符
BEM 的下划线不是为了好看，是让 CSS 工具链（比如 PostCSS 插件）和人眼都能无歧义识别层级。双下划线 __ 表示元素（element），双短横 -- 表示修饰符（modifier），它们不能互换，也不能省略。
-
.product-list__item✅ 是 product-list 组件内的一个条目 -
.product-list--compact✅ 是 product-list 组件的一种紧凑形态 -
.product-list__item--highlighted✅ 是该条目的高亮状态 -
.product-list-item❌ 没有分隔符，无法区分是组件名还是元素名 -
.product-list__item-highlighted❌ 缺少--，会被误读为另一个元素
遇到嵌套组件时，BEM 不递归，只平级声明
比如 .user-card 里有个 .avatar，不要写成 .user-card__avatar 然后在里面再塞一个按钮叫 .user-card__avatar__upload-btn——这违反 BEM 原则，也失去可维护性。
- 每个独立可复用的 UI 单元都应是一个顶层组件：
.avatar、.upload-btn各自定义，不依附父级 -
.user-card内部用.avatar和.upload-btn即可，靠 DOM 结构和局部作用域约束样式范围 - 若需定制子组件样式（如“用户卡片里的头像要小一圈”），加修饰符：
.avatar--in-user-card，而非拼接嵌套名 - 工具链如
postcss-bem或现代 CSS-in-JS 库（如clsx+tailwind）能帮你守住这条线，但前提是你自己不手滑写错
用 data-bem 或 CSS Modules 替代纯 class 名管理更稳
纯 BEM 类名靠人肉约定，项目大了难免漏写 -- 或多加空格。实际工程中，靠工具兜底比靠文档提醒更可靠。
- Webpack +
postcss-bem：允许你写.user-card { &__item {} &--loading {} }，自动编译为真实类名 - CSS Modules：文件即组件域，
styles.item天然隔离，配合命名习惯仍可用 BEM 风格（如item,itemDisabled） - Vue / React 中用
data-bem="user-card"属性辅助调试，浏览器里搜[data-bem]能快速定位组件边界 - 别在 HTML 里手动拼接类名：
class="user-card__item user-card__item--active"容易漏掉修饰符或写错顺序；用 JS 动态组合（clsx）或模板指令更稳妥
最常被忽略的是修饰符的布尔逻辑——--disabled 和 --active 不能共存，但没人阻止你同时加在同一个元素上。这类冲突得靠组件内部的 class 组合逻辑控制，不是 BEM 本身能解决的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
