前端Wiki/CSS 框架/基础/为什么用 CSS 框架

重复造轮子的问题

写原生 CSS 最大的感受是重复：每个项目都要手写一遍按钮、表单、卡片、导航栏；每个按钮要定义 padding、圆角、颜色、hover 状态；团队里每个人写出的按钮长得还不一样，最终形成一堆难以维护的「祖传样式」。

下面的示例演示了没有框架时的状态：为了一个主按钮手写六行样式，想要绿色的只能再复制一份改颜色，hover 还得单独写。这些劳动毫无创造性，却消耗了大量时间——这正是「重复造轮子」。

CSS 框架把高频出现的样式模式预先做好并命名：写一个类名就有设计良好的按钮，写几个类名就有响应式栅格。你从「造轮子的人」变成「用轮子的人」，把精力还给业务本身。

本节要点原生 CSS 的问题是大量重复、风格不统一、难维护；框架把常用样式预制成类名，按需取用。

CSS

<style>
  /* 没有框架：每个按钮都要手写一整套 */
  .btn-primary {
    display: inline-block; padding: 6px 12px;
    border: 1px solid #0d6efd; border-radius: 6px;
    background: #0d6efd; color: #fff; cursor: pointer;
  }
  .btn-primary:hover { background: #0b5ed7; }

  /* 想要绿色？再复制一份…… */
  .btn-success {
    display: inline-block; padding: 6px 12px;
    border: 1px solid #198754; border-radius: 6px;
    background: #198754; color: #fff; cursor: pointer;
  }
</style>
<button class="btn-primary">主要按钮</button>
<button class="btn-success">成功按钮（样式全是复制的）</button>

🔗 相关词条CSS 圆角栅格 Bootstrap Tailwind 响应式断点

📚 推荐阅读

Element Plus v2.2 组件库教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读