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/2024使用”，上线后立即归档
所有 @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 控制显示隐藏。否则，改一个按钮的移动端样式，可能意外影响整个导航栏的断点行为。
