class名重复或嵌套过深易致样式冲突与DOM耦合，BEM命名+作用域限定可切断冲突链；须禁用标签/ID选择器、强制block唯一前缀、元素修饰符挂靠block、样式包裹在:scope或data-component下，并通过stylelint和CI拦截违规写法。
为什么 class 名重复或嵌套过深会导致协作踩坑
多人维护同一套 CSS 时，.header、.btn 这类泛化 class 很容易在不同模块里被重复定义，样式相互覆盖；更常见的是靠 div > div > ul > li > a 这种路径式选择器强行定位，一旦 DOM 结构微调，样式就失效——这不是“写得不熟”，而是缺乏约束机制。
用 BEM 命名 + 限定作用域能直接切断冲突链
BEM（Block__Element--Modifier）不是教条，是降低认知成本的协作协议。关键在于三点：只用 class 不用标签/ID 选择器；block 名必须唯一且带业务前缀；element 和 modifier 必须挂靠在 block 下。
-
search-form是合法 block，form或search单独使用则危险 -
search-form__input可以，search-form input（后代选择器）禁止出现 - 所有组件级样式必须包裹在
:scope或[data-component="search-form"]属性下，防止全局污染
.search-form {
display: flex;
}
.search-form__input {
width: 200px;
}
.search-form__input--disabled {
opacity: 0.5;
}
审查工具和 CI 脚本比人工约定更可靠
光靠文档没人看，得让错误在提交前暴露。推荐两个低成本落地方式：
- 用
stylelint配置selector-class-pattern规则，强制匹配^[a-z][a-z0-9]*(-[a-z0-9]+)*(__[a-z][a-z0-9]*(-[a-z0-9]+)*)?(--[a-z][a-z0-9]*(-[a-z0-9]+)*)?$正则 - CI 中加一道
grep -r "div\|span\|ul\|ol" src/css/ | grep ">"，拦截路径选择器硬编码 - 对老项目，先用
postcss-selector-parser扫描出所有深度 > 3 的选择器，逐个收敛到 BEM
伪类和状态类必须走 data 属性驱动
:hover、:focus-within 看似无害，但多人协作中常有人写 .card:hover .card__title，结果 hover 区域扩大后意外触发。正确做法是把状态映射为 data- 属性：
.card[data-state="hovered"] .card__title {
color: #007bff;
}
然后用 JS 控制 el.dataset.state = 'hovered'。这样状态可预测、可测试、可回溯，不会因为某个同事加了个 pointer-events: none 就全崩。
最麻烦的从来不是命名规则本身，而是当某人为了“快速修一个 bug”绕过约定，悄悄加了一条 #sidebar .user-list li a —— 这种临时方案会像病毒一样传染。守住第一道 selector 入口，比后期清理十次都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
