不是必须同时存在；合法形式仅有block、block__element、block--modifier、block__element--modifier四种，顺序与连接符不可错。
Block、Element、Modifier 三部分必须同时存在吗？
不是必须同时存在。一个类名只含 Block（如 .card）完全合法，也最常见；加 __Element（如 .card__title）表示结构细分；加 --Modifier（如 .card--expanded）表示状态或变体。三者是可选组合，但顺序和连接符不能错：只能是 block、block__element、block--modifier、block__element--modifier 四种合法形式。
为什么 Element 必须用双下划线 __ 而不是单下划线 _？
单下划线 _ 用于拼接 Block 内部的多词名称（如 .nav-item），属于单词分隔符；双下划线 __ 是语义分隔符，明确标识“这是某块的子部件”。混淆会导致作用域模糊——比如 .nav_item 看起来像独立块，而 .nav__item 一眼可知它依附于 .nav。工具链（如 stylelint-selector-bem-pattern）也靠这个符号做语法校验。
Modifier 能直接挂在 Element 上吗？
可以，但需谨慎。例如 .button__icon--loading 合法，但它表达的是“这个图标处于 loading 状态”，而非“整个按钮处于 loading 状态”。常见错误是把本该属于 Block 的修饰符强行下放到 Element，比如写 .modal__header--large，其实应为 .modal--large .modal__header——因为尺寸变化影响的是整个模态框布局，不是仅头部。判断依据：修改后是否破坏 Block 的完整性或布局边界。
实际项目里最容易被忽略的细节
HTML 中每个需要样式控制的节点，都得有且仅有一个 BEM 类名；不能靠父级 class 透传样式（如 .card h2）。也不能混用 utility class 做核心样式（如 .card__title text-center），除非 text-center 纯属排版微调且不参与组件逻辑。真正难的不是写对名字，而是坚持让每个 class 都承载明确的语义边界——一旦松动，BEM 就退化成带下划线的普通命名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
