伪元素非DOM节点，无法直接加类名，须通过宿主元素类名间接控制；BEM中应以语义化修饰符（如btn--with-icon）表达其用途，而非虚构子元素名或实现细节。
为什么不能直接给 ::before 和 ::after 加类名？
因为伪元素本身不是 DOM 节点，你没法在 HTML 里写 class="foo__icon--before"，也不能用 JS 给它添加或切换类。所有样式必须通过宿主元素的类名间接控制。
所以 BEM 的核心逻辑得倒过来：不是“给伪元素命名”，而是“用宿主类名表达伪元素的语义和状态”。
__element--modifier 是最稳妥的命名方式
把伪元素当作宿主元素的一个视觉变体来建模。比如一个按钮带图标，图标由 ::before 实现，那就该用修饰符表达“带图标”的含义，而不是强行造个 __icon 元素。
- ✅ 推荐：
btn btn--with-icon→ 在 CSS 中写.btn--with-icon::before { ... } - ❌ 避免：
btn__icon（没对应 HTML 节点，违反 BEM 原则） - ❌ 避免：
btn--icon-left（语义模糊，“icon”不是按钮的状态，而是表现形式）
修饰符名要描述意图，不是实现细节。例如 --loading 比 --spinner-before 更健壮——万一以后改成用 ::after 或内联 SVG，类名也不用改。
立即学习“前端免费学习笔记（深入）”；
多个伪元素共存时，用不同修饰符区分职责
一个元素同时用 ::before 和 ::after 很常见（比如带装饰边框+状态徽章），这时别堆砌修饰符，而是按语义拆分：
-
card--has-decorative-border→ 控制::before画边框 -
card--is-highlighted→ 控制::after叠加高亮角标
不推荐 card--border-and-badge 这种耦合型修饰符：它把两个独立关注点绑死，后续想单独开关某一项就只能加新类或改 CSS，破坏可维护性。
伪元素内容依赖 JS 时，类名必须反映真实状态
如果 ::before 的 content 由 JS 动态注入（比如计数器、状态文字），类名就不能只写静态语义。要确保 CSS 类与 JS 状态严格同步：
- JS 设置
el.classList.add('tooltip--has-count')，CSS 写.tooltip--has-count::before { content: attr(data-count); } - 避免用
tooltip__count这种“假装有子节点”的写法，attr() 读取的是宿主元素的data-count属性，不是子元素文本 - 注意 IE 不支持
attr()用于非content属性，若需兼容，得降级为内联 style 或 JS 注入真实 DOM 节点
真正容易被忽略的是：伪元素的可见性往往依赖宿主元素的多个类共同作用，比如 btn--disabled btn--with-icon 下，::before 图标是否灰掉，得靠组合选择器控制，而不是单靠一个修饰符。
