css 代码可读性差怎么办_使用 css 工具提升代码结构

CSS 难维护主因是缺乏约束而非语法复杂；需通过命名规范、嵌套限制、自定义属性统一结构、压缩配置优化及工具辅助来提升可维护性。

为什么 CSS 文件越写越难维护

不是语法复杂，而是缺乏约束：没人阻止你把 .header-2 写在 footer.css 里，也没人拦着你在同一个选择器里混用布局、主题、状态三类样式。结果就是改个按钮颜色要 grep 十分钟，加个响应式断点得先理清嵌套层级。

真正拖慢开发的，从来不是写 CSS 的速度，而是定位「哪段样式正在生效」的时间。

PostCSS + postcss-nested 是最轻量的结构化起点

不需要切换预处理器，不强制你学新语法，只解决一个痛点：避免无休止的重复父选择器。

• 写 & 就能继承父级作用域，.card { &__title { font-size: 1.2em; } } 编译后是 .card__title
• 嵌套层级建议不超过 3 层，超过就该拆成独立组件类，比如 .card-header-actions 比 .card .header .actions button 更可控
• 注意 postcss-nested 不支持 @media 内嵌到选择器内部（那是 postcss-preset-env 的事），别误以为缩进就能自动提升媒体查询作用域

.button {
  padding: 0.5em 1em;
  &--primary {
    background: #007bff;
  }
  &:hover {
    opacity: 0.9;
  }
}

用 cssnano 压缩前先做“可读性保留”配置

默认开启的 reduceTransforms 会把 transform: translateX(10px) 改成 transform: 10px，看着省字节，但调试时根本看不出这是位移还是缩放。

• 关掉危险压缩项：{ reduceTransforms: false, mergeLonghand: false, normalizeWhitespace: false }
• 保留自定义属性名：确保 cssnano 不重命名 --theme-color 这类 CSS 变量，否则 JS 里 getComputedStyle(el).getPropertyValue('--theme-color') 会失效
• 压缩只应在构建阶段启用，开发时用 postcss-reporter 输出未使用的选择器列表，比肉眼扫更快发现冗余

不要跳过 CSS 自定义属性的命名约束

--color-primary 看起来规范，但一旦项目里同时出现 --color-primary-dark、--primary-color-dark、--dark-primary-color，主题切换逻辑就会失控。

• 统一用 [domain]-[type]-[name] 结构，例如：--surface-bg-default、--action-text-hover
• 禁止在 JS 中硬编码变量值，一律通过 getComputedStyle(document.documentElement).getPropertyValue('--surface-bg-default') 读取
• VS Code 装 CSS Peek 插件，悬停就能跳转到变量定义处——前提是命名不随意，否则跳过去是一堆 :root { --c1: #000; --c2: #fff; }

结构不是靠工具自动建立的，是靠每次写 class 名前多想半秒：它属于哪个语义层？会不会被其他模块意外覆盖？工具只是让这个思考过程不那么容易被跳过。