CSS 文件越改越乱因缺乏规范：@import 无序、class 命名冲突、废弃样式未清理；应按职责分 base/layout/component/page 四类拆分，统一入口导入，用带前缀的 BEM 变体命名，变更需关联 Jira、可追溯、受 CI 监控。

为什么 CSS 文件会越改越乱？

因为没人约定 @import 顺序、没人管 class 命名冲突、没人清理废弃样式，久而久之就变成“改一行，测五页”。团队里只要两人同时维护同一份 common.css，不出两周就会出现重复定义、覆盖失效、选择器权重失控的问题。

怎么组织 CSS 文件结构才不打架？

按职责拆分，不是按页面拆分。所有样式文件必须归属到以下四类之一，且禁止跨层引用：

• base.css：重置（normalize.css 或自定义 reset）、基础变量（:root）、通用工具类（.u-hidden, .u-mt-8）
• layout.css：栅格系统、容器、头部/侧边栏/主内容区等全局布局规则
• component.css：每个独立组件一个文件（button.css, modal.css），只写该组件内部样式，禁止用后代选择器穿透到其他组件
• page.css：仅用于单页强定制场景（如活动页），必须加注释说明“仅限 /promo/2025 使用”，上线后立即归档

所有 @import 必须从 index.css 统一入口导入，顺序固定为：base → layout → component → page。任何直接在 HTML 中 多个 CSS 的做法都视为违规。

class 名怎么起才不会互相覆盖？

用 BEM 变体，但去掉双下划线和双破折号——太难敲，也容易拼错。统一用 block__element--modifier 格式，且所有 class 必须带命名空间前缀：

• 业务组件用 u-（utility）：例如 u-btn, u-btn--primary
• 产品模块用 mod-（module）：例如 mod-cart, mod-cart__item--disabled
• 禁止出现 red, left, big 这类语义模糊的 class；颜色/位置/尺寸应由设计系统变量控制，不在 class 名中暴露

检查手段很简单：在 VS Code 安装 stylelint + stylelint-selector-bem-pattern 插件，保存即报错。

如何让 CSS 变更可追溯、不误伤？

两条铁律：

• 所有修改必须关联 Git 提交信息中的 Jira ID，例如 [FE-1234] add hover state to u-btn--secondary
• 删除样式前，先全局搜索该 class 在 JS 中是否被 document.querySelector 或 classList 引用；存在则必须同步修改 JS，或改用 data-* 属性做逻辑绑定

CI 流程中加入 cssstats 检查：如果单次提交使 CSS 总体积增长 >5KB 或选择器数量增加 >200 条，自动阻断合并并提示人工 review。

最常被忽略的是 @media 查询的嵌套层级——别在 component.css 里写三层嵌套媒体查询，把响应式逻辑提到 layout.css 或用 JS 控制显示隐藏。否则，改一个按钮的移动端样式，可能意外影响整个导航栏的断点行为。