前端 UI 库架构选型：CSS 框架与组件库的深度对比

在 React 生态系统中，选择 UI 库不仅仅是选择一套好看的样式，更是选择一种开发模式和架构约束。bulma、evergreen-ui、grommet、react-bootstrap、reactstrap 和 semantic-ui-react 代表了三种不同的技术路线：纯 CSS 框架、通用组件库和企业级设计系统。本文将从架构集成、样式定制、组件 API 和维护风险四个维度进行深度剖析。

🏗️ 架构集成模式：类名控制 vs 组件封装

这是最根本的区别。bulma 仅提供 CSS 类，你需要自己在 JSX 中组合类名。其他五个库提供封装好的 React 组件，将样式逻辑隐藏在组件内部。

bulma 要求你手动管理类名字符串。这意味着更灵活，但也更容易出错（比如拼写错误）。

// bulma: 手动组合 CSS 类
<button className="button is-primary is-large">
  点击我
</button>

evergreen-ui 提供高度封装的组件，通过 Props 控制样式变体。

// evergreen-ui: 组件化 API
import { Button } from 'evergreen-ui';

<Button appearance="primary" size="large">
  点击我
</Button>

grommet 同样使用组件，但强调语义化和无障碍属性。

// grommet: 语义化组件
import { Button } from 'grommet';

<Button primary size="large" label="点击我" />

react-bootstrap 将 Bootstrap 的类名映射为组件 Props，去除了对 jQuery 的依赖。

// react-bootstrap: Bootstrap 的 React 实现
import { Button } from 'react-bootstrap';

<Button variant="primary" size="lg">
  点击我
</Button>

reactstrap 的 API 与 react-bootstrap 非常相似，但实现细节略有不同。

// reactstrap: 另一种 Bootstrap 实现
import { Button } from 'reactstrap';

<Button color="primary" size="lg">
  点击我
</Button>

semantic-ui-react 提供声明式 API，但底层依赖已停止更新的 CSS。

// semantic-ui-react: 声明式组件
import { Button } from 'semantic-ui-react';

<Button primary size="huge">
  点击我
</Button>

🎨 样式定制与主题系统

当业务需求要求独特的品牌视觉时，主题系统的灵活性至关重要。

bulma 使用 Sass 变量进行定制。你需要在构建管道中覆盖默认变量。

// bulma: Sass 变量覆盖
$primary: #ff3860;
$family-primary: 'Helvetica Neue';
@import 'bulma';

evergreen-ui 拥有强大的主题引擎，支持运行时主题切换和细粒度配置。

// evergreen-ui: 主题配置对象
import { ThemeProvider, defaultTheme } from 'evergreen-ui';

const customTheme = {
  ...defaultTheme,
  colors: { primary: '#ff3860' }
};

<ThemeProvider value={customTheme}>...</ThemeProvider>

grommet 使用 JSON 对象定义主题，支持嵌套和扩展。

// grommet: 主题对象
import { Grommet, ThemeType } from 'grommet';

const theme: ThemeType = {
  button: { primary: { color: '#ff3860' } }
};

<Grommet theme={theme}>...</Grommet>

react-bootstrap 和 reactstrap 主要依赖 Bootstrap 的 Sass 变量或 CSS 覆盖，运行时主题能力较弱。

// react-bootstrap / reactstrap: Sass 定制
$primary: #ff3860;
@import 'bootstrap/scss/bootstrap';

semantic-ui-react 允许通过 LESS 变量定制，但配置过程较为繁琐。

// semantic-ui-react: LESS 变量
@primaryColor: #ff3860;

📝 表单处理与交互逻辑

表单是 Web 应用的核心。组件库如何处理输入状态、验证和布局反映了其设计哲学。

bulma 没有表单组件，你需要自己编写结构。

// bulma: 纯 HTML 结构
<div className="field">
  <label className="label">用户名</label>
  <div className="control">
    <input className="input" type="text" placeholder="输入用户名" />
  </div>
</div>

evergreen-ui 提供带内置标签和验证样式的输入组件。

// evergreen-ui: 封装的 Input
import { TextInputField } from 'evergreen-ui';

<TextInputField label="用户名" placeholder="输入用户名" required />

grommet 将表单视为一组可组合的对象，支持复杂的验证逻辑。

// grommet: 组合式表单
import { Form, FormField, TextInput } from 'grommet';

<Form>
  <FormField label="用户名" required>
    <TextInput name="username" placeholder="输入用户名" />
  </FormField>
</Form>

react-bootstrap 和 reactstrap 提供标准的表单组组件，与 Bootstrap 文档保持一致。

// react-bootstrap: 表单组
import { Form } from 'react-bootstrap';

<Form.Group controlId="username">
  <Form.Label>用户名</Form.Label>
  <Form.Control type="text" placeholder="输入用户名" />
</Form.Group>

// reactstrap: 表单组
import { FormGroup, Label, Input } from 'reactstrap';

<FormGroup>
  <Label for="username">用户名</Label>
  <Input id="username" placeholder="输入用户名" />
</FormGroup>

semantic-ui-react 使用简洁的声明式语法，但灵活性受限于底层 CSS。

// semantic-ui-react: 声明式表单
import { Form } from 'semantic-ui-react';

<Form>
  <Form.Field label="用户名" control="input" placeholder="输入用户名" />
</Form>

⚠️ 维护状态与长期风险

这是架构决策中最关键的一环。使用一个停止维护的库会导致未来的安全漏洞和技术债务。

• bulma: 维护良好，最近发布了 1.0 版本，专注于 CSS 稳定性。
• evergreen-ui: 由 Segment 维护，更新频繁，适合长期项目。
• grommet: 由 HPE 支持，企业级稳定性高，无障碍功能持续更新。
• react-bootstrap: 社区驱动，紧跟 Bootstrap 5 更新，是目前 Bootstrap 生态的首选。
• reactstrap: 更新频率低于 react-bootstrap，社区活跃度稍弱。
• semantic-ui-react: 高风险。底层 Semantic UI 仓库已归档，不再接受新功能。虽然 semantic-ui-react 仍可使用，但建议避免在新项目中使用，转而考虑 grommet 或 evergreen-ui。

📊 核心特性对比表

💡 架构师建议

选择 bulma：如果你想要一个轻量级的起点，并且希望完全控制 HTML 结构和 CSS 类名，不介意多写一些样板代码。适合设计驱动型项目。

选择 evergreen-ui：如果你需要快速构建功能丰富的企业级应用，且希望有一套统一的设计语言。它的主题系统非常适合需要多租户或白标化的 SaaS 产品。

选择 grommet：如果你的项目对无障碍访问（WCAG 标准）有严格要求，或者你需要一个模块化、可组合性极强的组件系统。适合政府、教育或大型企业内部系统。

选择 react-bootstrap：如果你团队熟悉 Bootstrap，或者需要利用现有的 Bootstrap 资源。它是迁移旧 jQuery/Bootstrap 项目到 React 的最佳路径。

避免 semantic-ui-react：尽管它的 API 很优雅，但底层技术的停滞是架构上的定时炸弹。对于新项目，请选择维护更积极的替代方案。

总结：没有最好的库，只有最适合的架构。对于大多数现代 React 应用，evergreen-ui 或 grommet 提供了更好的长期可维护性和开发体验；而对于 Bootstrap 生态的忠实用户，react-bootstrap 是唯一推荐的选择。