所以你需要一个 CSS 工具库吗？

让我们将 CSS 工具库定义为一个样式表，其中包含许多可用于执行少量一次性操作的类。 比如调整边距或填充的类。 设置颜色的类。 设置特定布局属性的类。 用于调整大小的类。 工具库可能以不同的方式处理这些问题，但似乎都共享这个理念。 这本质上将样式应用到 HTML 层次而不是 CSS 层次。 样式表成为您不常接触的开发依赖项。

仅使用工具库与少量使用工具库

您可以将像下面这样的工具库用作您在 CSS 中执行的其他任何操作的附加组件。 这些项目往往有不同的理念，也许并不总是鼓励这样做，但当然，您可以随心所欲。 您可以将其称为少量使用工具库，并且最终可能会得到如下 HTML 代码

<div class="module padding-2">
  <h2 class="section-header color-primary">Tweener :(</h2>
</div>

请原谅我在这里发表一些个人观点，但对我来说，这似乎是那种在当下感觉不错，但以后会后悔的事情。 而不是让所有样式都由您自己的命名类完成，样式信息现在变得分散了。 一些样式信息通过工具库类直接应用于 HTML，而一些样式则通过您自己的命名约定和 CSS 应用。

另一种选择是完全使用工具库，这样您就把所有样式信息从 CSS 完全转移到了 HTML 中。 它不再是一个分散的系统了。

我无法告诉您是否会喜欢这种完全使用工具库的方法，但从长远来看，我想您会更乐意选择全用或不用，而不是折中的方法。

这是原子 CSS 定义之一

您可以在此处阅读相关内容。 您可以将使用工具库来完成所有样式设计称为“静态”原子 CSS 的一种形式。 这与“编程”版本不同，在编程版本中，您将处理如下标记

<div class="Bd Bgc(#0280ae):h C(#0280ae) C(#fff):h P(20px)">
    Lorem ipsum
</div>

然后会生成相应的 CSS。

工具库

让我列出一些我遇到的工具库，摘录一些它们关于自身的一些描述，以及一个代码示例。

Shed.css

当我厌倦了编写 CSS 后，Shed.css 就诞生了。 世界上所有的 CSS 已经都写过了，没有必要在我们的每个项目中都重新编写一遍。

目标：通过创建一组选项来消除开发人员和设计师的干扰，而不是鼓励无谓的争论，这就是 Shed 的名称来源。

<button
  class="
    d:i-b
    f-w:700
    p-x:3
    p-y:.7
    b-r:.4
    f:2
    c:white
    bg:blue
    t-t:u
    hover/bg:blue.9
  "
>
  Log In
</button>

Tachyons

使用尽可能少的 CSS 创建快速加载、高度可读和 100% 响应式的界面。

<div class="mw9 center pa4 pt5-ns ph7-l">
      <time class="f6 mb2 dib ttu tracked"><small>27 July, 2015</small></time>
      <h3 class="f2 f1-m f-headline-l measure-narrow lh-title mv0">
        <span class="bg-black-90 lh-copy white pa1 tracked-tight">
          Too many tools and frameworks
        </span>
      </h3>
      <h4 class="f3 fw1 georgia i">The definitive guide to the JavaScript tooling landscape in 2015.</h4>
</div>

Basscss

Basscss 使用清晰、人性化的命名约定，易于理解和推理，同时通过更具可扩展性和可读性的代码来加快开发时间。

<div class="flex flex-wrap items-center mt4">
  <h1 class="m0">Basscss <span class="h5">v8.0.2</span></h1>
  <p class="h3 mt1 mb1">Low-Level CSS Toolkit <span class="h6 bold caps">2.13 KB</span></p>
  <div class="flex flex-wrap items-center mb2">
  </div>
</div>

Beard

一个适合有更重要事情要做的人的 CSS 框架

Beard 最受欢迎和最具争议的功能是其辅助类。 许多人认为像 Beard 为您生成的辅助类会导致代码膨胀，并且与使用内联样式一样糟糕。 我们发现，拥有丰富的辅助类可以使您的项目更容易构建、更容易理解，并且更健壮。

<div class="main-content md-ph6 pv3 md-pv6">
    <h2 class="tcg50 ft10 fw3 mb2 md-mb3">Tools</h2>
    <p class="tcg50 ft5 fw3 mb4 lh2">Beard isn't packed full of every feature you might need, but it does come with a small set of mixins to make life easier.</p>

    <h3 class="tcg50 ft8 fw3 mb2 md-mb3">appearance()</h3>
</div>

turretcss

turretcss 专为设计而开发，是一个样式和浏览器行为规范化框架，用于快速开发响应式和可访问的网站。

<section class="background-primary padding-vertical-xl">
  <div class="container">
      <h1 class="display-title color-white">Elements</h1>
      <p class="lead color-white max-width-s">A guide to the use of HTML elements and turretcss's default styling definitions including buttons, figure, media, nav, and tables.</p>
  </div>
</section>

Expressive CSS

• 类用于视觉样式。 标签用于语义。
• 从良好的基础 HTML 元素样式开始。
• 使用工具库类实现 CSS 的 DRY 原则。
• 类名应该一目了然。
• 响应式布局样式应该易于（甚至有趣）实现。

<section class="grid-12 pad-3-vert s-pad-0">
    <div class="grid-12 pad-3-bottom">
        <h3 class="h1 pad-3-vert text-light text-blue">Principles</h3>
    </div>
    <div class="grid-12 pad-3-bottom">
        <h4 class="pad-1-bottom text-blue border-bottom marg-3-bottom">Do classes need to be ‘semantic’?</h4>
        <p class="grid-12 text-center">
                <span class="bgr-green text-white grid-3 s-grid-12 pad-2-vert pad-1-sides">Easy to understand</span>
                <span class="grid-1 s-grid-12 pad-2-vert s-pad-1-vert pad-1-sides text-green">+</span>
                <span class="bgr-green text-white grid-3 m-grid-4 s-grid-12 pad-2-vert pad-1-sides">Easy to add/remove</span>
                <span class="grid-1 s-grid-12 pad-2-vert s-pad-1-vert pad-1-sides text-green">=</span>
                <span class="bgr-green text-white grid-2 m-grid-3 s-grid-12 pad-2-vert pad-1-sides">Expressive</span>
        </p>
    </div>
</section>

Tailwind CSS

用于快速 UI 开发的实用优先 CSS 框架

这个东西还没有出现，但他们已经在 Twitter 上拥有超过 700 名粉丝。 这种事情让我相信人们确实对这类东西有强烈的需求，我们不应该忽视它。 不过，我们可以先看看他们的推广网站

<div class="constrain-md md:constrain-lg mx-auto pt-24 pb-16 px-4">
    <div class="text-center border-b mb-1 pb-20">
        <div class="mb-8">
            <div class="pill h-20 w-20 bg-light p-3 flex-center flex-inline shadow-2 mb-5">
                
            </div>
        </div>
    </div>
</div>

工具库作为样式指南

Marvel

随着 Marvel 作为产品和公司不断发展，我们面临的一个挑战是如何改进 Marvel 品牌标识并在每个产品中一致地应用它。 我们创建了这份样式指南，将其作为中心位置，在这里我们存放 UI 组件、品牌指南、品牌资产、代码片段、开发人员指南等的实时清单。

<div class="marginTopBottom-l textAlign-center breakPointM-marginTop-m  breakPointM-textAlign-left breakPointS-marginTopBottom-xl">
  <h2 class="fontSize-xxxl">Aspect Ratio</h2>
</div>

Solid

Solid 是 BuzzFeed 的 CSS 样式指南。 受 Basscss 等框架的影响，Solid 使用不可变的原子 CSS 类来快速原型设计和开发功能，提供一致的样式选项以及创建新布局和设计的灵活性，而无需编写额外的 CSS。

<div class="xs-col-12 sm-col-9 lg-col-10 sm-offset-3 lg-offset-2">
   <div class="xs-col-11 xs-py3 xs-px1 xs-mx-auto xs-my2 md-my4 card">
      <h1 class="xs-col-11 sm-col-10 xs-mx-auto xs-border-bottom xs-pb3 xs-mb4 sm-my4">WTF is Solid?</h1>
      <div class="xs-col-11 sm-col-10 xs-mx-auto">
         <section class="xs-mb6">
            <h2 class="bold xs-mb2">What is Solid?</h2>
         </section>
         <section class="xs-mb6">
            <h2 class="bold xs-mb2">Installation</h2>
            <p class="xs-mb2">npm install --save bf-solid</p>
         </section>
         <section class="xs-mb6 xs-hide sm-block">
            <h2 class="bold xs-mb2">Download</h2>
            <p>
               <a href="#" download="" class="button button--secondary xs-mr1 xs-mb1">Source Files</a>
            </p>
         </section>
      </div>
   </div>
</div>

这与 CSS-in-JS 的理念相关，但又有所区别

JavaScript 的潮流已强劲地转向组件。将 HTML 和 JavaScript 结合起来对很多人来说感觉很好，因此看到样式开始随之而来也就不足为奇了。而且这并非完全出于偶然。它有一些合理的论据，包括 CSS 的全局特性导致冲突和意外副作用等问题。如果您能以一种永远不会发生这种情况的方式来设置样式（这并不意味着您需要完全放弃 CSS），我承认我能理解它的吸引力。

这种在 JavaScript 层面为组件设置样式的想法似乎确实很大程度上消除了对实用程序库的需求。可能很大程度上是一种二选一的情况。