CSS选择器失控源于命名无约束、无作用域隔离及变更影响不可见；CSS Modules通过文件名约定和哈希类名解决全局污染，BEM规范深度与校验，性能上规避:nth-child等低效选择器。
为什么 CSS 选择器会失控？
大型项目里，.btn、.header 这类泛用类名在多个团队、多个模块中反复定义，最终导致样式覆盖混乱、删除困难、调试时 !important 泛滥。根本原因不是写法不对，而是缺乏命名约束 + 作用域隔离 + 变更影响可见性。
CSS Modules 是最落地的起点
它把 import styles from './Button.module.css' 中的类名自动编译成唯一哈希（如 Button_button__kSd2a），天然避免全局污染。关键点在于：
- 不依赖构建工具配置“启用 CSS Modules”，而是在文件名中强制约定
.module.css后缀，CI 可扫描拦截非模块化 CSS 的提交 -
:global(.legacy-header)仅用于对接老代码，且必须加注释说明迁移计划 - 动态 class 拼接必须用
styles.button，禁用字符串模板如`btn ${isPrimary ? 'primary' : ''}`—— 否则破坏作用域
/* Button.module.css */
.button {
padding: 8px 16px;
}
.button:hover {
background: #007bff;
}BEM 命名不是银弹，但能约束选择器深度
当项目仍需全局 CSS（如设计系统基础 token），BEM 提供可预测的命名结构：block__element--modifier。重点不在写全，而在禁止嵌套选择器：
- ✅ 允许：
.card__title、.card--featured - ❌ 禁止：
.card .title、.card > h2、.card__title.is-active（改用.card__title--active） - 所有 BEM 类名必须通过 ESLint 插件
stylelint-selector-bem-pattern校验，CI 失败即阻断
选择器性能陷阱：别让 :nth-child 拖垮渲染
大型列表页中，tr:nth-child(odd) 看似简洁，但浏览器需遍历全部兄弟节点计算索引，列表超 500 行时 FPS 明显下降。替代方案：
立即学习“前端免费学习笔记（深入）”；
- 服务端或 JS 渲染时直接注入
class="row-odd"，CSS 只写.row-odd - 用
will-change: transform隔离滚动区域，避免重排触发全量选择器匹配 - 禁用
:not()嵌套（如div:not(.disabled):not(.hidden)），复杂度指数级上升，现代浏览器优化有限
真正难的不是写对某个选择器，而是让整个团队在新增一个 .input 类时，下意识检查它是否已在 17 个模块中存在同名但样式冲突的定义 —— 这需要工具链卡点，而不是靠文档提醒。
