你真的需要一个CSS实用工具集吗？

疯狂的技术宅

发布于 2019-03-28 10:21:12

8160

发布于 2019-03-28 10:21:12

文章被收录于专栏：京程一灯

让我们先来定义：一个CSS工具集库是一个拥有许多可用于做许多一次性小事的样式表。如调整margin和padding的类。设置颜色的类。设置具体样式属性的类。设置尺寸的类。工具集库会用不同的方式来实现这些东西,但更像是分享这种理念。这种方式在本质上更像是把样式放在html层次而非css层次上。样式表成为你不用真正的接触一个开发依赖。

只使用和使用部分实用工具库。

使用一个工具集库的其中一个方式是像使用其他任何CSS的附加插件一样。这些项目目的在于展示不同的观念维度，也许并不总是鼓励这样做，但当然你可以选择你喜欢的方式来做。你可以调用实用工具库的那些小工具集，最后你的HTML可能像这样：

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

原谅这里的这些小意见，但是于我而言，这似乎在一开始让人感觉很爽，但随后就会后悔。这种方式不是将所有的样式都用自己定义的class来实现，现在样式信息是分开的。一些样式信息通过工具集class直接应用于HTML上，另一些样式信息通过自己命名规定或者css来应用。

另一个选择是将所有的样式信息应用在一个同一个工具集库中，这种方式将所有的样式信息都全部从CSS迁移到HTML中。再也不是一个分离的系统了。

我不能确定的告诉你哪种方式更好，如果你喜欢使用这样的全部用工具集库的方法，但长期来看，我想你会更愿意选择全用工具集或全不用而不是混用两者的做法。

这是Atomic CSS的定义之一

详情阅读这里。你可以使用工具集库来写你的静态原子CSS样式。这有别于“程式化”版本，因为您可以在此处处理这样的标记：

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

而且输出会适应这个的CSS。

工具集库

Lemme只列出了我遇到的一堆，挑选一些关于他们说的关于自己经历的话和一个代码示例。

Shed.css

Shed.css在我开始厌倦写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最受欢迎也是最受争议的特性是它的helper类。许多人觉得实用工具类，比如Beard为你产生的类导致膨胀，与使用内联样式一样糟糕。我们已经发现拥有一系列丰富的helper类让你的项目更容易构建，更容易思考，更容易维护。

<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

class用于视觉样式。标签用于语义化。
基于html元素很好的基础样式。
使用工具集类简化CSS。
class命名要能一眼看懂。
响应式布局应该很容易（甚至有趣）

<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框架。

虽然这事还没有办成，但是已经有700多twitter粉丝。这让我相信大家有很强烈的欲望做这件事，这不应该被忽视。我们可以在他们的宣传网站看到他们的热情高峰：

<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 class作为迅速原型和开发特性，提供了一致且灵活的的样式选项来创建新的布局，且不用额外写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层次上的样式组件的想法似乎在很大程度上抵消了对实用工具库的需求。可能在很大程度上是一种或另一种事情。

往期精选文章
ES6中一些超级好用的内置方法
浅谈web自适应
使用Three.js制作酷炫无比的无穷隧道特效
一个治愈JavaScript疲劳的学习计划
全栈工程师技能大全
WEB前端性能优化常见方法
一小时内搭建一个全栈Web应用框架
干货：CSS 专业技巧
四步实现React页面过渡动画效果
让你分分钟理解 JavaScript 闭包