BEM通过命名约束避免样式冲突和维护灾难Block如card为独立单元Element如card__title须依附BlockModifier如card--featured表状态且不单独使用。为什么BEM能避免样式冲突和维护灾难大型网站样式失控往往不是因为写了太多CSS而是选择器层级太深、命名随意、组件复用时互相覆盖。BEMBlock-Element-Modifier不靠魔法只靠命名约束所有类名都明确表达「属于哪个块」「是不是它的子元素」「当前是什么状态」。它不强制你用预处理器或工具链纯CSS就能落地。常见错误现象.header .nav .item.active 这种嵌套选择器在另一个页面引入同名.header时极易误伤更糟的是团队里有人写.btn--primary有人写.button-primary时间一长谁都不敢删旧样式。Block块是独立功能单元如card、search-form命名必须语义化不带位置或样式暗示Element元素用双下划线连接必须依附于Block如card__title、card__footer禁止出现card__title__highlight这种嵌套ElementModifier修饰符用双连字符表示状态或变体如card--featured、button--disabled必须和Block一起用不能单独出现BEM在真实项目中的写法细节不是所有地方都适合硬套BEM。比如工具类u-text-center、重置类reset-list或全局主题变量theme-dark它们本身就不属于某个Block强行塞进BEM结构反而别扭。使用场景决定写法组件库中推荐严格BEM老项目增量改造时可先从新模块开始旧代码保留但禁止新增嵌套选择器SSR或微前端环境下BEM类名天然支持CSS Module的局部作用域无需额外加hash后缀。立即学习“前端免费学习笔记深入” 稿定AI 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能