17370845950

CSS变量、模块化文件、utility-first和scoped样式可减少重复；需按语义命名、区分作用域、合理抽象，避免过度统一或隔离。

用 CSS 自定义属性（CSS Variables）抽离可复用值

颜色、间距、圆角、字体大小这些值在项目里反复出现，硬编码会导致改一处要搜全项目替换。用 :root 定义变量后，所有地方引用 var(--color-primary)，后续只需改一处声明。

• 变量名要有语义，比如 --spacing-md 比 --s2 更易维护
• 避免把具体像素值直接塞进组件类名里，像 .btn-padding-12 这种写法会锁死样式逻辑
• 注意作用域：局部变量（在选择器内定义）和全局变量（:root 下）别混用，否则调试时容易漏掉继承链

按功能拆分 CSS 文件 + @import 或构建工具合并

把重复样式归到独立文件里，比如 _reset.css、_typography.css、_mixins.css，再统一引入。现代项目更推荐用构建工具（如 PostCSS、Vite）做自动合并和压缩，而不是靠浏览器多次 HTTP 请求加载。

• 纯 CSS 项目可用 @import，但注意它会阻塞渲染，且不支持条件加载
• Webpack/Vite 用户优先用 import 语法（如 import './base/typography.css';），由打包器控制顺序和去重
• 别把所有样式塞进一个 index.css：文件越大，diff 越难，协作时冲突概率越高

用 utility-first 框架（如 Tailwind）替代手写重复类名

传统 BEM 写法中，.card-title、.list-item-title、.modal-header-title 各自定义字体、颜色、margin，本质是重复声明同一组样式。Tailwind 把原子样式暴露为类名，直接组合：text-lg font-semibold text-gray-800 mb-2，逻辑清晰，无冗余 CSS 输出。

• 启用 content 配置扫描 HTML 模板，Tailwind 只生成实际用到的类，体积可控
• 不要在 HTML 里写 class="text-blue-500 text-lg font-bold p-4 rounded bg-white shadow" 这种长串——它可读性差，建议封装成 @layer components { .card-header { @apply text-lg font-bold p-4 rounded bg-white shadow; } }
• 警惕“过度抽象”：为每个按钮状态都写 .btn-primary-hover 类，不如用 hover:bg-blue-600 原生 utility

用 CSS-in-JS 或 scoped style 避免全局污染带来的隐式重复

Vue 的 、React 的 styled-components 或 emotion，会让样式只作用于当前组件。这样即使两个组件都需要 display: flex; gap: 8px;，也不会因为共用类名而互相干扰，也不用费心起唯一类名来防冲突。

立即学习“前端免费学习笔记（深入）”；

• scoped style 不等于零重复：如果多个组件需要完全相同的布局结构，还是该抽成 shared-layout.css 或 useFlexLayout() Hook
• CSS-in-JS 的动态样式（如 color: ${props => props.theme.primary}）比纯 CSS 更易复用主题变量
• 注意 SSR 场景下，CSS-in-JS 可能导致 FOUC 或服务端/客户端样式不一致，需检查 hydrate 逻辑

:root {
  --color-primary: #3b82f6;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --radius-default: 0.375rem;
}

.card {
  border-radius: var(--radius-default);
  padding: var(--spacing-md);
  background: white;
}

.card-title {
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

真正难优化的不是“怎么减少重复”，而是“怎么判断哪些该复用、哪些该隔离”。比如一个按钮的禁用态样式，在表单页和弹窗页表现一致，就该抽；但如果弹窗按钮需要加阴影、表单按钮要变透明度，强行合并反而增加条件判断。边界感比技巧更重要。