根本原因是样式作用域不清晰、引入路径随意、复用逻辑缺失；应采用BEM命名、单文件组件隔离、模块化CSS组织、@import聚合入口、:where()降权与[data-theme]主题控制。
为什么 CSS 文件越改越不敢动
根本原因是样式作用域不清晰、引入路径随意、复用逻辑缺失。比如 header.css 里混着导航、logo、搜索框的样式，而 user-page.css 又重写了一次 logo 的 margin，最后谁改谁背锅。
用 BEM 命名 + 单文件组件隔离作用域
不靠 CSS Modules 或 Shadow DOM 也能控住范围，关键是命名和组织方式要一致。BEM 能让类名自带上下文，避免“看到 .btn 不知道它在哪用、能不能删”。
-
block__element--modifier格式强制拆解语义，例如search-form__input--large比input-large更易定位来源 - 每个业务模块（如登录、商品列表）对应一个独立 CSS 文件，只负责自身结构，不跨模块写样式
- 全局样式仅保留极简基础项：重置（
reset.css）、字体定义（typography.css）、常用工具类（u-margin-top-sm）
用 @import 和构建工具统一入口，禁用
HTML 中多个 是维护噩梦：顺序错乱导致覆盖失效、无法按需加载、上线后难排查哪份样式生效了。
- 所有 CSS 都通过主入口文件聚合，例如
app.css里只写：@import "reset.css"; @import "components/header.css"; @import "pages/home.css";
- 构建时用 PostCSS 或 Webpack 自动展开
@import，生成单个压缩文件，避免运行时 HTTP 请求和顺序问题 - 禁止在 HTML 中直接
—— 这等于绕过整个依赖管理，下次加个新页面就又多一个散点
用 :where() 降权 + [data-theme] 控制主题切换成本
当需要支持暗色模式或客户定制主题时，靠不断叠加 !important 或高优先级选择器只会让 CSS 更脆弱。真正可维护的做法是提前约定权重规则。
立即学习“前端免费学习笔记（深入）”；
- 基础组件样式统一用
:where(.btn) { ... }书写，天然降低优先级，方便后续覆盖 - 主题相关样式全部挂载到
[data-theme="dark"]属性下，而不是用.dark-mode .btn这种嵌套，避免层级爆炸 - 颜色变量全走 CSS 自定义属性（
--color-primary），主题切换只需换一组:root定义，不用动任何组件样式文件
button/ 目录、写 button.css、用 btn__icon--loading 而不是随手敲个 loading-icon。只要有一个环节松动，整条链就滑回老路。 
