使用CSS框架如Tailwind和Bootstrap可减少重复样式，提升开发效率；通过实用类组合、组件化结构和自定义属性实现高效复用，结合@apply封装常用类，增强代码一致性与可维护性。
在 CSS 中使用框架能有效减少重复样式，提升开发效率和代码可维护性。成熟的 CSS 框架（如 Tailwind CSS、Bootstrap、Bulma 等）通过提供预定义的类名和模块化结构，让开发者无需从零编写通用样式。
使用实用类框架（如 Tailwind CSS）
Tailwind CSS 是一种“实用优先”（utility-first）的框架，它将常见样式抽象为小而具体的类名，直接在 HTML 中组合使用，避免重复定义相似样式。
例如，多个元素都需要居中对齐 + 内边距 + 圆角，传统方式可能需要写多个类或重复声明：
普通 CSS 写法： ```css .card { padding: 1rem; border-radius: 0.5rem; text-align: center; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } ```如果多个组件都需要类似样式，就会出现大量重复。而使用 Tailwind 可直接在标签上组合：
立即学习“前端免费学习笔记（深入）”；
```html
卡片内容
```
相同的类名可在不同组件中复用，无需额外写 CSS。
利用组件化框架结构（如 Bootstrap）
Bootstrap 提供了标准化的组件类（如 btn、card、form-control），统一外观并减少自定义样式需求。
比如按钮样式：
```html ```
所有按钮自动继承基础样式（padding、border、cursor 等），只需一个类名即可应用完整风格，避免每个按钮都写一遍圆角、背景色、字体大小等。
使用 CSS 自定义属性与框架结合
即使使用框架，也可以通过 CSS 变量增强一致性。例如，在 Tailwind 中扩展主题颜色：
```css @layer base { :root { --primary: #3b82f6; --secondary: #6b7280; } } ```然后在项目中统一引用这些变量，配合框架类名，实现设计系统级别的复用。
提取公共样式为自定义类（适用于任何框架）
当发现某些类组合频繁出现时，可以借助预处理器（如 @apply in Tailwind）封装成新类：
```css .btn-primary { @apply px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700; } ```这样既保留了框架的优势，又减少了 HTML 中的重复类名，提高可读性。
基本上就这些。选择合适的 CSS 框架，并合理利用其设计模式，能大幅减少重复样式代码，让团队更专注于功能和体验。
