直接写 .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，它的隔离性来自**不组合、不继承、不覆盖**：
