CSS如何组织高扩展性的UI组件_基于BEM命名规范的目录与类名设计-css教程-PHP中文网

BEM类名禁用嵌套选择器因破坏块的独立性，正确做法是用扁平化语义类名如.card__title；目录按block-element-modifier三层组织以提升可维护性；modifier统一用--前缀；避免过度分解，复用性低的结构应使用工具类而非element。

css如何组织高扩展性的ui组件_基于bem命名规范的目录与类名设计

因为BEM的核心是“块（Block）”的独立性，一旦你写 .card .title，就等于把 .title 的样式绑死在 .card 结构里，后续想复用 .title 到 .modal 或 .sidebar 就得拷贝样式、改选择器、修权重——这不是扩展，是复制粘贴式维护。

正确做法是让每个元素都有完整语义化的类名：.card__title、.modal__title、.sidebar__title。它们彼此无关，可单独引入、单独覆盖、单独测试。

目录不是为了“看起来整齐”，而是让开发者一眼看出：这个组件是否能被抽离、是否已存在同类实现、修改后会影响哪些页面。

推荐一级目录即 block 名，内部只放该 block 的核心文件：

/components/card/ → 对应 card 这个 block
/components/card/card.css → 只写 .card、.card__header、.card--featured 等，不出现其他 block 名
/components/card/card.js → 只处理 .card 自身行为，不操作 .button 或 .icon
如果需要子组件（比如 card 里用了 avatar），就直接引用 /components/avatar/，而不是在 card/ 下建 avatar/

常见错误：把 card__button 单独拆成一个 /components/card-button/ 目录——它不是独立 block，只是 card 的一个 element，不该有自己生命周期。

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

下载

BEM官方允许两种 modifier 写法：--large（状态型）和 _theme-dark（上下文型），但混用会导致团队理解成本飙升。

统一用双连字符 -- 表示“开关型”状态：.button--disabled、.input--error
避免用下划线做 modifier：.button_theme-primary 是反模式，它模糊了 block 和 theme 的边界；主题应由 wrapper 类或 CSS 自定义属性控制
如果真要支持多主题，写成 .theme-dark .button + .theme-light .button 更清晰，而不是靠 modifier 撑起整套皮肤系统
工具如 stylelint-selector-bem-pattern 可强制校验，比口头约定靠谱

过度分解是新手最常踩的坑——看到 button 就拆 button__icon、button__text、button__loader，结果一个按钮 DOM 节点塞满 5 个 class，维护时改一个就要查三处。

先问：这个“子结构”是否会被其他 block 复用？icon 是，button__icon 不是；所以用独立 .icon 类，而非 .button__icon
只对真正属于该 block 语义一部分的结构用 element：.card__body 合理，.card__paragraph 不合理（段落是通用语义，应由 typography 系统管）
用 utility class 补位，而不是硬凑 BEM：.card__header.text-lg.font-bold 比 .card__header--large-bold 更灵活、更易组合
当一个 block 内部逻辑开始复杂（比如带 tab 切换、异步加载、动画状态），就该考虑拆成子 block，而不是堆 element