直接写 .btn 易导致样式覆盖，因 css 是全局作用域，后加载的同名样式会覆盖先加载的，多人协作或引入第三方库时冲突高发。
为什么直接写 .btn 很容易导致样式覆盖？
因为 CSS 是全局作用域，没有模块封装机制。只要两个地方都定义了 .btn，后加载的样式会覆盖先加载的，不管它们在哪个文件、哪个组件里。尤其在多人协作或接入第三方 ui 库时，.btn、.modal、.container 这类通用名冲突概率极高。
常见错误现象：
– 某个页面的按钮突然变大、变色，但没改过相关 CSS
– 第三方弹窗组件的 .close 被项目里全局的 .close 覆盖，叉号消失
– 重构旧模块时发现删掉某行 CSS，整个首页布局错乱
命名空间怎么加才真正起效？
光靠前缀（比如 .myproject-btn）不够，关键是要有**层级约束 + 作用域隔离**：
- 用 BEM 命名法配合组件根类：例如
.article-card__title，其中.article-card是命名空间根，所有子元素必须嵌套在其下，避免意外泄漏 - 避免只靠前缀却不限制选择器范围：像
.myproject-btn:hover仍可能被body .btn:hover覆盖，需写成.myproject-btn.myproject-btn:hover或用:where()降权（见下条） - 推荐在构建时注入命名空间：用 postcss 插件
postcss-prefixwrap把.btn { ... }自动转为.myproject .btn { ... }，确保作用域封闭
工具类（utility-first）真能替代语义类？
可以，但前提是放弃“一个 class 对应一个视觉功能”的幻想——工具类本质是原子 CSS，它的隔离性来自**不组合、不继承、不覆盖**：
立即学习“前端免费学习笔记（深入）”；
- 每个工具类只声明一条声明：如
.p-4→padding: 1rem，.text-center→text-align: center - 冲突几乎不可能发生：因为
.p-4和.p-2不会同时生效（html 中不会并存），也不会互相影响 - 注意陷阱：
– 不要自己写.bg-blue-500:hover这类悬停变体，应使用框架原生支持的hover:bg-blue-600（Tailwind）或通过插件生成
– 避免用工具类模拟组件逻辑，比如给按钮写.flex .items-center .px-4 .py-2 .bg-blue-500 .text-white .rounded，不如封装成.btn .btn-primary更可维护
现代方案：CSS Modules 和 :where() 怎么配合用？
CSS Modules 解决的是 js 模块级作用域问题，但编译后类名哈希化（如 Button_button__abc123）对调试不友好；:where() 则用于降低选择器优先级，防止工具类被覆盖：
- CSS Modules 推荐搭配
localsConvention: "camelCase"，让btnPrimary可以直接在 JSX 中写成className={styles.btnPrimary} - 当混合使用工具类和组件类时，用
:where(.btn) { ... }包裹组件样式，使其优先级低于任何带标签或属性的选择器，从而让class="tuc-19bc10f7-1ab041-0 btn p-3 tuc-19bc10f7-1ab041-0"中的p-3稳定生效 - 注意：sass/less 的嵌套规则在 CSS Modules 中默认不生效，需显式启用
composes或用@layer控制层叠顺序
最易被忽略的一点：命名空间和工具类不是二选一，而是分层使用的——组件级用命名空间（如 .dashboard-sidebar），内部细节用工具类（如 flex gap-2 p-1），再辅以 :where() 控制权重。否则要么太重（全工具类导致 HTML 膨胀），要么太松（纯命名空间难防第三方污染）。