双下划线__仅用于block与element之间，表示元素直属块的语义关系；禁止单下划线、三层下划线及嵌套，否则工具链无法识别、语义断裂；如user-card__avatar正确，user-card__avatar__img错误。

双下划线 __ 只能出现在 block 和 element 之间

它不是“分隔符”，而是语义标记：表示这个 element 是该 block 的直属组成部分。写错位置或数量，BEM 工具链就认不出来。

常见错误现象：user-card__avatar__img、header__nav__link——浏览器不报错，但语义断裂，VS Code 插件无法跳转，stylelint 直接忽略校验。

• user-card__avatar ✅ 正确：avatar 是 user-card 的固有子部分
• user-card_avatar ❌ 错误：单下划线失去层级语义，被当成一个普通类名
• user-card__avatar-img ✅ 合理：多词元素名用 - 连接，不影响 __ 结构
• user-card__content__avatar ❌ 错误：BEM 不允许元素嵌套，应重构为 user-card__avatar 或新 block avatar

双中划线 -- 必须紧贴前一部分，且只用于 modifier

修饰符永远依附于某个 block 或 element，不能独立存在；-- 是它的语法锚点，少一个短横或位置错位，就等于丢掉状态语义。

典型误用：button__icon--large 看似合理，但如果 button 本身没定义 button__icon 元素，这个类名就脱离上下文；更危险的是 button--disabled .button__label 这种后代选择器写法，直接破坏 BEM 隔离原则。

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

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

下载

• button--disabled ✅ 修饰 block
• menu__item--active ✅ 修饰 element，__item 不可省略
• menu__item-active ❌ 少一个 -，变成模糊的连写词，工具链无法识别为 modifier
• button__icon--loading--small ❌ 多个 -- 连用，违反单一职责，应拆成 button__icon--loading 和 button__icon--small（若语义正交）

块名里的中划线 - 和 __、-- 完全无关

- 只负责拼单词，不表达层级或状态。它出现在 block 名里（如 search-form）、element 名里（如 search-form__input-group）、modifier 名里（如 --is-hidden）都合法，但绝不能替代 __ 或 --。

错误示范：search-form_input（该用 __）、search-form--input（-- 不能挂到 block 上表示 element）。

• user-profile ✅ 合规块名，- 是单词连接符
• user-profile__bio-section ✅ 元素名含 - 仅作内部语义分隔
• user-profile__bio--expanded ✅ modifier 作用于 element，结构完整
• user-profile-bio ❌ 漏掉 __，被识别为新 block，非 user-profile 的子元素

动态拼接类名时最容易踩的坑

Vue/React 中用模板字符串手动拼 ${block}__${el}，一旦 el 来自 props 且含空格、大写或非法字符（如 "first name"），产出的 user-card__first name 就是无效类名——CSS 不认，调试器找不到，工具链静默失效。

• 务必 normalize：转小写、去空格、替换非法字符为 -
• 优先使用 bem-cn 或 @bem-react/classname，它们自动 sanitize 并校验结构
• 禁止在 element 名里塞位置信息，如 sidebar__top-nav → 应拆成 sidebar__nav + --position-top
• 所有 __ 和 -- 都是硬编码进名字的语法锚点，不是风格装饰；写错一字符，后续维护、复用、工具提取都会出问题

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