如何在高频迭代的敏捷开发中坚持CSS BEM规范？-css教程-PHP中文网

bem在迭代快时易被弃用，因命名冗长（如block__element--modifier比header-btn多近一倍字符），开发者倾向先跑通再命名；两周后复用样式时因未落地bem导致多处重复css，组件复用性崩溃。

如何在高频迭代的敏捷开发中坚持css bem规范？

为什么BEM在迭代快时反而容易被弃用

因为 block__element--modifier 命名写起来比 header-btn 多敲近一倍字符，而CR/合并/上线节奏压得紧，开发者会本能选择“先跑通再命名”。但真正踩坑是在两周后：改一个按钮样式，发现它同时被 user-card__btn、form__submit、modal-action 三处复用，却各自写了独立CSS——BEM没落地，组件复用性就塌了。

用 ESLint + stylelint 自动拦截非BEM类名

手动检查靠不住，必须让工具在保存/提交前报错。关键不是装插件，而是配对规则：

stylelint-selector-bem-pattern 要设 componentName 为小驼峰（如 userProfile），否则 user-profile__item 会被判错
eslint-plugin-react 的 jsx-a11y/no-static-element-interactions 和 BEM无关，别误开——它只管可访问性，开了反而干扰
VS Code 里启用 editor.codeActionsOnSave 自动修复，但 stylelint 的 autofix 对嵌套 &__elem 不可靠，建议关掉自动修复，只保留报错

把BEM结构固化进脚手架模板

每次新建组件都手写 Button.jsx + Button.module.css + Button.stories.js 太慢。直接在脚手架里预置带BEM骨架的模板：

/* Button.module.css */
.Button {
  /* block */
}
.Button__label {
  /* element */
}
.Button--primary {
  /* modifier */
}
.Button--disabled .Button__label {
  /* modifier + element 组合，合法 */
}

注意：.Button--primary.Button__label 是非法写法（两个class平级无嵌套关系），工具不会拦，但会导致样式覆盖混乱——这是高频迭代中最常漏检的逻辑错误。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

设计师交付切图时同步提供BEM语义标注

UI走查阶段，设计师用Figma插件（如 css-generator）导出带 data-bem 属性的HTML片段，例如：

<button class="Button Button--secondary" data-bem="Button--secondary">
  <span class="Button__label">取消</span>
</button>

前端拿到后直接按 data-bem 值映射到对应CSS类，省去猜命名。但要注意：Figma导出的 Button__text 若和开发约定的 Button__label 冲突，必须以代码仓库里的 Button.module.css 为准——设计稿是参考，不是契约。

BEM不是命名洁癖，是给CSS加一层可预测的“接口契约”。最易忽略的点是：modifier 必须作用于 block 级 class，不能跳过 block 直接修饰 element；否则 .Card__header--large 这种写法，会让 .Card--compact .Card__header 的样式优先级失控。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！