剖析 Tailwind 和 Bulma 的差异和适用场景-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的快速发展和应用场景的不断扩张，市面上涌现出了许多优秀的CSS框架，其中 Tailwind 和 Bulma 是备受关注的两个框架。本文将从多个方面详细剖析 Tailwind 和 Bulma 的差异和适用场景，并结合示例代码给出指导意义。

Tailwind 和 Bulma 的区别

核心理念不同

Tailwind 的核心理念是“样式应该是可重复使用的，不应该有样式冲突的问题”，因此提供了大量的 class 名称，使得样式相对独立，易于重复使用。而 Bulma 的核心理念是“可自定义的、模块化的”，因此提供了丰富的组件和变量，使得用户可以更加自由的进行选择和修改。

风格不同

Tailwind 的风格主要注重规范和精简，它的改变主要依靠 class 的组合和覆盖以及简单配置，其默认的按钮、表单等元素样式较为简洁，而且省去了 class 名称的重复，提供了一种“懒人”的使用方式。而 Bulma 的风格则更加大气和统一，它提供了多种颜色搭配方案以及丰富的组件、功能，可以让用户轻松快速的构建出一个高品质的页面。

处理方式不同

Tailwind 采用了“utility-first”（即功能类样式）的方式，每个 class 都是一个功能类，而组件则是由这些 class 组合而成，这种方式可以使得 CSS 文件体积较小，但是会造成 class 的数量过多，可能会使 HTML 文件过度臃肿。而 Bulma 采用了“component-based” 的方式，即基于组件的样式处理方式，可以提高代码的可读性和维护性，但是 CSS 文件体积可能会相对较大。

Tailwind 和 Bulma 的适用场景

适用 Tailwind 的情况

对体积和可维护性有一定要求，同时相对懂得 CSS 的技术人员。
对样式规范化、快速维护、模块化的支持较为关注。
项目中样式的多变性相对较少，使用组件比较少的情况下。
通过改变 class 以达到样式效果的方式下，减少样式冲突的可能性。

适用 Bulma 的情况

重视设计和整体风格的统一，需要简化开发流程，而不是重复的组合排列各种 class。
对自定义的支持和组件的使用有一定要求。
有一定的 CSS 基础，可以自由改变元素的样式和布局等。
采用了大量组件的情况下，避免 class 名称的冲突和对于修改样式修改时间的缩短。

代码示例

Tailwind

Tailwind 支持提供了多种配置方式，比如说 postcss 配置、 CDN 引入等，这里我们以后者为例。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <title>Tailwind Example</title>
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/tailwindcss@1.9.2/dist/tailwind.min.css" />
  </head>
  <body>
    <div class="flex items-center justify-center h-screen bg-gray-200">
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Button
      </button>
    </div>
  </body>
</html>

可以看到，简单的 HTML 页面里只包含了一个自适应居中的背景和一个悬停时变换颜色的按钮，但是却只有两个 class 名称加上一个 style 可以完全实现。

Bulma

Bulma 也支持多种方式的配置，这里同样以 CDN 引入为例。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <title>Bulma Example</title>
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css" />
  </head>
  <body>
    <section class="hero is-primary is-fullheight">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">
            Fullheight Hero
          </h1>
          <h2 class="subtitle">
            善于选择合适的工具，才能事半功倍。
          </h2>
        </div>
      </div>
    </section>
  </body>
</html>

可以看到，通过简单的代码就可以实现一个带有首屏效果的全屏界面，这其中各种 class 的组合排列实现了许多功能，如页面上方的导航栏、背景的渐变效果、以及其它细节等。

总结

以上，该文主要介绍了 Tailwind 和 Bulma 的差异和适用场景，并给出相应的代码示例，以便读者可以更加直观的了解两个 CSS 框架的特点。在实际生产中，两者都有其优势和不足，因此我们需要选择最适合自己的开发工具，从而提高开发效率、降低开发成本，实现更加高效的前端开发。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653b01107d4982a6eb551701