应将有独立状态、行为或复用场景的子结构升为独立Block；Modifier须离散互斥且≤5个；状态类应提升至父Block统一控制，避免重复和外溢。

别缩写类名，缩写 user-card__avatar--size-lg → uc-avt--l 会直接让 DevTools 里看不出组件归属、构建工具误删、新人完全无法理解。真正该动刀的是组件边界、状态表达和 Modifier 使用方式。

怎么判断一个子结构该拆成独立 Block 而不是留作 __element

核心就一条：它有没有自己的状态、行为或复用场景？有，就必须升为 Block。

• status-badge 出现在用户列表、订单卡片、通知弹窗里 → 应该是独立 Block，不是 user-card__status
• price-tag 有自己的颜色逻辑、点击反馈、加载动画 → 不该依附于 product-card 命名
• form-field 在登录页、筛选栏、设置表单都用 → 它和 search-form 是协作关系，不是从属关系
• 一旦出现三层下划线（如 header__nav__item__link），说明已违背 BEM 原则：Block 应是独立单元，__ 只描述直接子元素

Modifier 堆叠失控时该怎么收口

像 button--theme-primary--size-xl--variant-outline--is-loading 这种类名，问题不在长度，而在把配置逻辑全塞进了 HTML —— 后期改一个值就得全局搜索替换，且 PurgeCSS 很难安全识别。

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

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

下载

• Modifier 必须离散、互斥、可枚举；总数建议 ≤ 5 个（如 button--primary、button--disabled、button--sm、button--lg、button--outline）
• --size-xl 和 --theme-dark 这类只控制间距、颜色的值，应交给 CSS 自定义属性：button + style="--btn-padding: 16px 32px; --btn-bg: #007bff;"
• 布尔型状态（如 --is-loading）可以保留，但必须和 Block 类名共存：user-card__avatar user-card__avatar--is-loading，不能单独出现
• 禁止形容词堆叠：button--very-big-and-centered 是反模式

多个子元素共用同一状态时，为什么不能各自加 --modifier

写 dashboard__header--loading + dashboard__chart--loading + dashboard__list--loading 看似直观，实则重复、难维护、易漏改。状态外溢是类名膨胀最隐蔽的推手。

• 正确做法是提升到父 Block：dashboard--is-loading，再用选择器批量控制：.dashboard--is-loading .dashboard__header
• 需配合作用域隔离，推荐用 :where() 或 scoped CSS 防止污染其他模块
• 如果 JS 层需要监听状态变化，统一在 dashboard 元素上操作 class，比分散管理 5 个子元素更可靠
• 这种提升不只省字符，更让“加载中”这个语义真正属于页面上下文，而非某个视觉片段的附属品

最容易被忽略的一点：类名变长往往发生在页面容器（如 dashboard-page）和功能组件（如 user-card）混为一谈时。你写的不是 CSS，是组件职责的说明书——敢不敢把一个“看起来很像子元素”的东西单独拎出来当成 Block 维护，比怎么缩写重要得多。

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