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 输出。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 启用
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 的 <style scoped>、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);
}
真正难优化的不是“怎么减少重复”，而是“怎么判断哪些该复用、哪些该隔离”。比如一个按钮的禁用态样式，在表单页和弹窗页表现一致，就该抽；但如果弹窗按钮需要加阴影、表单按钮要变透明度，强行合并反而增加条件判断。边界感比技巧更重要。 
