根本原因是样式作用域不清晰、引入路径随意、复用逻辑缺失；应采用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 和构建工具统一入口，禁用 <link> 散装引入

HTML 中多个 <link rel="stylesheet"> 是维护噩梦：顺序错乱导致覆盖失效、无法按需加载、上线后难排查哪份样式生效了。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 所有 CSS 都通过主入口文件聚合，例如 app.css 里只写：

  @import "reset.css";
  @import "components/header.css";
  @import "pages/home.css";

• 构建时用 PostCSS 或 Webpack 自动展开 @import，生成单个压缩文件，避免运行时 HTTP 请求和顺序问题
• 禁止在 HTML 中直接 <link href="xxx.css"> —— 这等于绕过整个依赖管理，下次加个新页面就又多一个散点

用 :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。只要有一个环节松动，整条链就滑回老路。