伪元素不能套BEM命名，因其是虚拟节点，不参与HTML结构、不可被JS选择、无语义；::before和::after必须挂载在真实存在的BEM块或元素上，如.card::after或.form__input::after，而非虚构的.block__element。
伪元素不能套BEM命名，伪类可以但需谨慎；::before和::after必须挂载在真实存在的BEM块或元素上，而非虚构的.block__element。
为什么::before和::after不能写成.block__element::before
BEM只约束真实 DOM 节点，而伪元素是虚拟节点，不参与 HTML 结构、不暴露给 JS 选择器、也不影响语义。硬套.button__icon::before这类写法，往往意味着.button__icon根本没在 HTML 中出现——它只是为塞图标凭空造的类名。这会导致：样式无法复用（因为绑定在虚构层级）、重构时牵一发而动全身（改修饰符名就得同步改伪元素选择器）、调试时找不到对应 DOM 节点。
正确做法是直接作用于已有且语义合理的 BEM 类：
- 装饰整个块（如卡片底部阴影）→
.card::after - 强化某个真实子元素（如输入框右侧清空按钮）→
.form__input::after（前提是.form__input确实存在并语义合理） - 差异化控制（如不同主题按钮箭头）→
.button--primary::after和.button--secondary::after，无需中间层
:hover、:focus等伪类在BEM中怎么写
伪类属于状态筛选器，本身不新增节点，所以可以安全叠加在 BEM 类上，但要注意避免过度嵌套和语义断裂：
- 推荐：
.button:hover、.input:focus、.nav-link:active—— 状态直接作用于语义明确的块或元素 - 慎用：
.button__text:hover—— 若.button__text只是纯文本容器，悬停行为实际应由父级.button统一响应，否则交互逻辑分散、可访问性受损 - 禁用：
.button__icon:focus—— 图标本身通常不可聚焦，焦点应落在按钮整体；若需键盘操作图标，应确保其包裹在可聚焦元素内，并用role和tabindex补足语义
content值要不要进BEM命名
完全不需要。content是纯样式层行为，和结构无关。即使你用content: "→"实现列表分隔符，也不该因此定义.list__separator——它只是.list-item::after的渲染结果。
常见错误包括：
- 为每个
content值单独建 BEM 元素类（如.icon-arrow-right），导致 CSS 膨胀、维护成本高 - 把
content当语义内容对待，忽略其不可被屏幕阅读器朗读、无法被 JS 获取的限制 - 在
content里写关键信息（如“必填”、“已选”），违反可访问性原则
真正需要语义化的内容，应该写在 HTML 里；content只用于装饰性符号、图标、视觉分隔等非关键信息。
兼容性与语法：用::before还是:before
CSS3 明确规定伪元素用双冒号::before，伪类用单冒号:hover，这是语义区分的关键信号。虽然浏览器仍广泛支持:before写法，但混用会模糊伪类/伪元素边界，增加团队理解成本。
实操建议：
- 新项目一律使用
::before和::after - 老项目迁移时，优先批量替换，避免
:hover和:before共存造成认知混乱 - 注意拼写：不是
:befor或::beofre，少一个e就失效 -
content属性必须声明，哪怕为空：content: ""；否则伪元素不会渲染
最易被忽略的一点：伪元素默认是display: inline，要设宽高或定位，必须显式声明display: block或display: inline-block，否则width/height/position等属性无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
