bem是ui组件库存活的底线，通过块名+元素+修饰符的命名强制隔离css作用域，防止样式污染；需规范文件结构、构建约束与类名一致性，而非仅命名游戏。
BEM不是“可选规范”，而是UI组件库能活过三个月的底线——没它，组件一复用就样式打架，一升级就全局崩。
为什么BEM能防止组件样式互相污染
组件库的核心矛盾是：每个组件必须「自带作用域」，但CSS天然是全局的。BEM不靠CSS Scope（那得依赖构建工具或框架），只靠命名强制隔离。
-
.button是危险的——它可能被.modal .button、.card .button或某个第三方 reset.css 覆盖 -
.button改成.ui-button仍不够——.ui-button和.form-button还是可能撞名 -
.ui-button__icon--loading才真正唯一：块名ui-button是业务语义+命名空间，__icon表明它只能出现在ui-button内部，--loading只描述状态，不改变归属
这种命名让 Webpack 的 css-modules 或 Vite 的 css-scoped 不是必需项——纯 CSS 文件也能做到模块级封装。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
组件库中 Element 和 Modifier 的误用高频点
很多团队把 BEM 当成“加下划线的游戏”，结果写出 .button__text__highlight 或 .button--primary--large，这直接破坏模块边界。
-
__element必须是块的直接子结构角色，不是任意嵌套层级：✅.dialog__header、.dialog__body；❌.dialog__header__title（应为.dialog__title） -
--modifier只能修饰块或元素，且不能脱离宿主单独使用：✅.dialog--fullscreen、.button__icon--hidden；❌.hidden或.button--primary .icon - Modifier 不表达样式细节（如
--bg-blue-500），只表达业务状态（如--disabled、--compact）
如何让 BEM 在组件库中真正落地而不流于形式
光写对类名没用。组件库的 BEM 约束必须穿透到文件结构、构建流程和代码审查环节。
- 每个组件一个目录：
/components/ui-button/，目录内只放ui-button.css、ui-button.tsx、ui-button.test.tsx - SCSS 中禁用任何非
&__/&--的嵌套：& a、& > span、&.is-active全部报错——用stylelint-selector-bem-pattern+postcss-bem-linter - CI 检查类名是否匹配目录名：如果
ui-button.css里出现.ui-input__field，立刻 fail - 组件导出的 class 前缀必须可配置（如
prefix="ui"），但内部结构不变：${prefix}-button__icon，方便下游项目换肤或降级
BEM 和现代 CSS 方案（Tailwind / CSS-in-JS）不是替代关系
组件库用 BEM 并不排斥 Tailwind 或 styled-components，关键在「谁负责语义，谁负责样式」。
- 用 Tailwind 时，别写
class="flex items-center p-2 bg-blue-500"堆砌原子类——而是在组件内封装成className={cx("ui-button", { "ui-button--primary": primary })}，再由外部 CSS 定义.ui-button--primary - 用 styled-components 时，别只靠 JS 逻辑生成样式，仍要保留 BEM 类名结构：
const StyledButton = styled.button.attrs({ className: "ui-button" })，再通过&__icon显式暴露子元素钩子 - 真正容易被忽略的是：BEM 的块名（如
ui-button）必须和组件导出名、npm 包名、设计系统文档中的术语严格一致——否则设计师说“改一下 button 的 loading 状态”，开发搜button--loading却发现实际叫btn--busy，协作就断了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
