标准答案
- CSS Modules 通过构建工具把类名局部化，减少全局命名冲突。
- Scoped CSS 常见于 Vue 单文件组件，通过属性选择器等方式限制样式作用范围。
- BEM 用 block、element、modifier 命名约定管理全局类名，适合没有构建隔离的项目。
- 原子化 CSS 把样式拆成小工具类，适合快速组合、统一 token 和减少重复 CSS。
- 选型要看框架、构建能力、团队规范、主题能力、SSR 和长期维护成本。
题目解析
这题不是问哪个方案绝对最好，而是问作用域、命名、复用和约束怎么取舍。
局部隔离能减少冲突，但不等于设计系统；原子化能提高组合效率，但要求团队接受类名密度和约束方式。
代码示例
BEM 通过命名表达组件结构和状态。
CSS
.card {}
.card__title {}
.card--featured {}常见误区
- 认为 Scoped CSS 可以解决所有样式泄漏，忽略深层组件和全局样式。
- BEM 命名不按约定执行，最后仍然变成随意命名。
- 原子化 CSS 没有 token 约束，导致间距、颜色和断点失控。