Open Props：现代 Web 的 CSS 框架以及和Tailwind CSS的区别

hust2007
702 阅读11分钟

Tailwind CSS 是唯一一个开发者乐于继续使用的主要 UI 框架；而 Open Props 正在吸引一小部分充满热情的追随者。（State of CSS）

Open Props是一个相对较新的 CSS 框架，但已经在最新State of CSS调查的兴趣统计中名列前茅，很多指标已经超越了知名的Tailwind CSS。

image.png

Open Props介绍

Open Props 是一种前端开发工具，用于简化和优化 CSS 的编写方式。它主要以CSS 自定义属性 为基础，提供了大量预定义的样式变量，开发者可以使用这些变量快速搭建用户界面 (UI)，而不必从头编写大量样式代码。

CSS 自定义属性（通常被称为 CSS 变量）是现代 CSS 的一项强大功能，允许开发者定义一组全局变量，供整个项目中的不同部分共享使用。这使得样式更具可维护性、可重用性和灵活性。而 Open Props 则是预设了常用的变量集合，使开发者可以立即使用，不需要从零开始编写这些基础样式。

核心功能

Open Props 提供了一组已经优化并且预定义好的变量，涵盖了以下方面：

  1. 颜色（Colors）：Open Props 包含一系列常用的颜色调色板，适用于不同的 UI 风格设计。
  2. 字体（Typography）：它提供了常用的字体大小、行高、字重等排版属性，便于快速搭建文本样式。
  3. 阴影（Shadows）：多种阴影效果预设，开发者可以通过简单引用实现不同的视觉层次感。
  4. 间距（Spacing）：预定义的间距值（padding、margin）使布局更加简洁，避免在项目中反复定义相同的数值。
  5. 动画（Animations）：Open Props 还包含了基本的 CSS 动画，比如淡入淡出、平移等效果。
  6. 边框和圆角（Borders and Radii）：它提供了不同的边框粗细和圆角值，方便开发者为元素添加轮廓或圆角效果。

优势

  1. 易用性：开发者只需引入 Open Props 提供的变量，无需花时间去定义常见的样式，从而可以专注于业务逻辑和用户体验的改进。

  2. 一致性：使用 Open Props 可以确保整个项目中样式的一致性。所有的颜色、间距、阴影等都来源于同一组变量，这样可以有效避免样式的重复和冲突。

  3. 轻量级：Open Props 的设计宗旨之一是轻量化。它不需要任何 JavaScript，只是纯粹的 CSS，因此不会增加页面的性能开销。

  4. 可扩展性：虽然 Open Props 提供了一系列开箱即用的变量，但开发者仍然可以自由扩展和自定义。如果某个预设的变量不满足需求，开发者可以通过定义新的 CSS 自定义属性来扩展其功能。

应用场景

1. 快速原型设计

在早期的设计阶段，开发者需要迅速创建一个可交互的界面来展示给团队或客户。Open Props 提供了现成的颜色、排版和布局变量，开发者可以通过引用这些变量来快速搭建一个具有现代设计风格的 UI 原型。

例如，在一个简单的按钮设计中，我们可以使用 Open Props 预定义的颜色和间距来快速创建一个响应式的按钮样式：

button {
  background-color: var(--blue);
  padding: var(--size-3);
  color: white;
  border-radius: var(--radius-2);
}

2. 维护大型项目

对于大型项目，保持样式的一致性和可维护性是一大挑战。通过使用 Open Props，团队成员可以共享相同的样式库，从而减少重复工作，确保 UI 设计的一致性。

假设我们需要为一个大型网站创建一套响应式布局。我们可以利用 Open Props 提供的间距和栅格系统来实现：

.container {
  display: grid;
  gap: var(--size-4);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

3. 设计系统

Open Props 非常适合构建和维护设计系统。设计系统通常包含大量重复使用的 UI 组件和样式规范，Open Props 提供的全局 CSS 变量让这些组件可以轻松地复用和统一管理。

在一个设计系统中，你可能会有一个全局的颜色调色板。使用 Open Props 可以确保所有的组件都引用同一组颜色变量：

:root {
  --primary-color: var(--blue);
  --secondary-color: var(--green);
}

.button-primary {
  background-color: var(--primary-color);
}

.button-secondary {
  background-color: var(--secondary-color);
}

4. 与其他框架的集成

Open Props 还可以与其他前端框架（如 React、Vue、Angular）结合使用。虽然它本质上是纯 CSS 的解决方案，但可以在这些框架中通过引入和使用其变量来实现 UI 风格的统一。例如，在 React 项目中，你可以通过直接引用 Open Props 提供的变量来定义组件的样式：

const Button = () => (
  <button style={{ backgroundColor: 'var(--blue)', padding: 'var(--size-3)' }}>
    Click Me
  </button>
);

Open Props使用

使用 Open Props 非常简单。开发者可以通过 CDN 或 npm 安装，并将其引入到项目中。例如，通过 CDN 引入 Open Props：

<link rel="stylesheet" href="https://unpkg.com/open-props">

或者通过 npm 安装：

npm install open-props

安装后，就可以在 CSS 文件中直接引用 Open Props 提供的变量。

与TailWind CSS的区别

Open Props 和 Tailwind CSS 都是前端开发中常用的工具，旨在简化 CSS 编写，提升开发效率，但它们在理念、实现方式和应用场景上有很大的区别。

1. 理念和设计哲学

  • Open Props：基于 CSS 自定义属性（CSS Variables） 的预定义样式库。它的主要目的是为开发者提供一组现成的 CSS 变量（例如颜色、间距、阴影、动画等），供项目中全局使用。这些变量是通过纯 CSS 文件定义的，开发者可以在任何地方直接调用这些变量。它提供了高度的灵活性，允许开发者在代码中定义、覆盖和扩展自定义属性。

    设计哲学：增强 CSS 的可维护性和一致性，减少重复定义基础样式的工作，重点在于全局共享和重用 CSS 变量，同时保持 CSS 的原始灵活性。

  • Tailwind CSS：是一种 实用工具优先（Utility-First） 的 CSS 框架。它提供了大量预定义的实用类（utility classes），用于快速构建用户界面。开发者通过在 HTML 标签上添加各种类名（如 text-center, bg-blue-500, p-4 等）来实现样式的定义。这种方式完全基于类选择器，而不是依赖于传统的样式表编写模式。

    设计哲学：鼓励开发者使用小而独立的 CSS 类来组合复杂的 UI 样式，从而避免编写自定义的 CSS 文件。它侧重于直接在 HTML 中定义样式，避免上下文切换和 CSS 文件的维护。

2. 使用方式

  • Open Props：开发者使用 Open Props 时，通过在 CSS 中引用预定义的变量来设置样式。其核心是通过 CSS 自定义属性实现变量化样式定义，因此它保留了 CSS 代码的灵活性，开发者仍然需要编写自定义的 CSS 文件。

    示例：

    .button {
  background-color: var(--blue);
  padding: var(--size-3);
  border-radius: var(--radius-2);
}

    在这里，--blue、--size-3 和 --radius-2 是 Open Props 提供的 CSS 自定义属性。

  • Tailwind CSS：Tailwind 强调通过 HTML 类来控制样式，因此开发者几乎不需要编写自定义的 CSS 文件，而是直接在 HTML 中添加大量的实用类。例如，定义一个按钮样式可能看起来像这样：

    <button class="bg-blue-500 text-white py-2 px-4 rounded-md">
  Click Me
</button>

    Tailwind 中的 bg-blue-500、py-2、px-4 等类名是直接对应具体样式的实用工具类。

3. 学习曲线

  • Open Props：使用 Open Props 的学习曲线较低，因为它依赖于 CSS 自定义属性，并且保持了 CSS 编写的传统模式。只要熟悉 CSS，开发者只需要了解 Open Props 提供的变量集，就可以轻松上手。

  • Tailwind CSS：由于它采用了大量的实用工具类，开发者需要学习和记住这些类名。虽然 Tailwind 提供了清晰的文档，但因为其独特的类命名方式和实用工具优先的开发理念，对于习惯传统 CSS 编写方式的开发者来说，初次接触时可能需要一些时间来适应。

4. 可维护性

  • Open Props：通过 CSS 变量的方式，全局样式的可维护性较高。开发者可以集中定义或修改某些变量，项目中的所有相关部分会自动更新。这对于样式的统一和一致性管理非常方便，特别是在大型项目中。

  • Tailwind CSS：Tailwind 的维护性依赖于实用类的合理使用。由于所有的样式都直接在 HTML 中定义，当项目规模较大时，HTML 代码可能会变得臃肿，不太容易维护和阅读。不过 Tailwind 提供了 @apply 规则，可以将实用类合并为自定义的样式规则，以此来简化代码。

    Tailwind 示例：

    .btn {
  @apply bg-blue-500 text-white py-2 px-4 rounded-md;
}

    使用 @apply 可以避免在 HTML 中堆积过多的类名，提升代码的可读性。

5. 灵活性

  • Open Props：提供的灵活性较高，因为它本质上还是依赖于 CSS 的原生功能。开发者可以轻松地扩展、覆盖和组合变量，也可以根据项目需求自定义新的 CSS 变量。而且，Open Props 与任何框架（如 React、Vue、Angular）或工具链都可以轻松集成，不依赖特定的开发工具或流程。

  • Tailwind CSS：Tailwind 灵活性相对较低，因为它强制使用实用类，这意味着开发者大部分时间需要在 HTML 中操作。如果不喜欢在 HTML 中添加大量类名，Tailwind 的使用可能会显得限制较多。此外，尽管 Tailwind 提供了自定义配置的功能，允许开发者通过配置文件扩展和调整预定义类，但它依然保持着较为固定的开发模式。

6. 性能

  • Open Props：由于 Open Props 主要依赖于 CSS 自定义属性，其性能表现非常好，不会增加额外的 CSS 文件大小。浏览器原生支持自定义属性的解析，加载速度也很快。适用于任何规模的项目，尤其是希望优化性能的场景。

  • Tailwind CSS：Tailwind CSS 默认会生成大量的实用类，这可能导致 CSS 文件非常大。不过，Tailwind 提供了树摇（tree-shaking）功能，可以在构建过程中移除未使用的类，从而极大地减少生成的 CSS 文件大小。这使得 Tailwind 在生产环境中的性能同样优秀。

7. 应用场景

  • Open Props：适用于希望保持传统 CSS 编写模式，同时利用 CSS 变量提升样式一致性和维护性的项目。特别是大型、复杂的项目，或者需要与现有样式系统集成的项目。

  • Tailwind CSS：更适合那些注重快速开发、UI 元素组合频繁的项目，如开发速度要求高的中小型应用、原型设计或希望使用实用类的项目。Tailwind 对于项目样式的结构化管理较少，需要开发者遵循其独特的类命名体系。

总之， Open Props 提供了一套基于 CSS 变量的工具，允许开发者在保持传统 CSS 灵活性的同时，提升样式的一致性和可维护性。 Tailwind CSS 则是一种实用类优先的 CSS 框架，通过在 HTML 中直接定义样式类，减少编写自定义 CSS 的需求，专注于快速搭建用户界面。

总结

前端技术的未来正在朝着模块化、轻量化的方向发展。随着Web应用程序复杂度的增加，开发者更倾向于采用能够提供灵活性、可扩展性和一致性的新工具。Open Props正好顺应了这一趋势，它不仅可以与现代的前端框架（如React、Vue）结合使用，还可以独立运作，成为开发者控制样式的有力助手。

无论是为小型项目提供设计变量，还是为大型项目建立统一的设计系统，Open Props都展现了其独特的价值。CSS的未来发展方向将更加关注可维护性和灵活性，而Open Props正是这一趋势的体现。

avatar
文章
阅读
粉丝