Benötigen Sie eine CSS-Utility-Bibliothek?

Lassen Sie uns eine CSS-Utility-Bibliothek als Stylesheet definieren, das viele Klassen enthält, die für kleine, einmalige Dinge verwendet werden können. Wie Klassen zur Anpassung von Rändern oder Abständen. Klassen zur Festlegung von Farben. Klassen zur Festlegung spezifischer Layout-Eigenschaften. Klassen für die Größenbestimmung. Utility-Bibliotheken können diese Dinge auf unterschiedliche Weise angehen, scheinen aber diese Idee zu teilen. Dies bringt im Wesentlichen das Styling auf die HTML-Ebene und nicht auf die CSS-Ebene. Das Stylesheet wird zu einer Entwicklungsabhängigkeit, die Sie nicht wirklich anfassen müssen.

Nur eine Utility-Bibliothek verwenden vs. Utilities einstreuen

Eine Möglichkeit, eine Utility-Bibliothek wie die folgenden als Ergänzung zu allem anderen, was Sie mit CSS tun, zu verwenden. Diese Projekte haben tendenziell unterschiedliche Philosophien und ermutigen dies vielleicht nicht immer, aber natürlich können Sie tun, was Sie wollen. Man könnte das als Einstreuen einer Utility-Bibliothek bezeichnen, und Sie könnten mit HTML enden wie

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

Verzeihen Sie ein wenig Meinungsäußerung hier, aber für mich scheint dies etwas zu sein, das sich *im Moment* gut anfühlt und dann später bedauerlich ist. Anstatt dass das gesamte Styling von Ihren eigenen benannten Klassen vorgenommen wird, sind die Styling-Informationen nun verstreut. Einige Styling-Informationen werden direkt im HTML über die Utility-Klassen angewendet, und einige Styles werden durch Ihre eigenen Namenskonventionen und CSS angewendet.

Die andere Option ist, *vollständig* auf eine Utility-Bibliothek zu setzen. Auf diese Weise haben Sie alle Styling-Informationen vom CSS ins HTML verlagert. Es ist kein verstreutes System mehr.

Ich kann Ihnen nicht sagen, ob Sie es lieben werden, mit einem All-in-Utility-Bibliotheksansatz wie diesem zu arbeiten oder nicht, aber langfristig stelle ich mir vor, dass Sie glücklicher sein werden, wenn Sie sich entweder für den All-in-Ansatz oder für gar keinen entscheiden als für einen Zwischendurch-Ansatz.

Dies ist eine der Definitionen von Atomic CSS

Darüber können Sie hier lesen. Man könnte die Verwendung einer Utility-Bibliothek für das gesamte Styling als eine Form von „statischer“ atomarer CSS bezeichnen. Das unterscheidet sich von einer „programmatischen“ Version, bei der Sie Markup wie dieses verarbeiten würden

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

Und heraus käme CSS, das dem entspricht.

Utility-Bibliotheken

Ich werde einfach eine Reihe davon auflisten, auf die ich gestoßen bin, einige Zitate herauspicken, was sie über sich selbst sagen, und ein Codebeispiel.

Shed.css

Shed.css entstand, nachdem ich es leid war, CSS zu schreiben. Die gesamte CSS der Welt wurde bereits geschrieben, und es besteht keine Notwendigkeit, sie in jedem unserer Projekte neu zu schreiben.

Ziel: Ablenkungen für Entwickler und Designer zu eliminieren, indem eine Reihe von Optionen geschaffen wird, anstatt die „Bikeshedding“-Diskussion zu fördern, woher shed seinen Namen hat.

<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

Erstellen Sie schnell ladende, gut lesbare und 100 % reaktionsschnelle Schnittstellen mit so wenig CSS wie möglich.

<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

Durch die Verwendung klarer, humanisierter Namenskonventionen ist Basscss schnell zu verinnerlichen und einfach zu verstehen, während gleichzeitig die Entwicklungszeit mit skalierbarerem, besser lesbarem Code verkürzt wird.

<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

Ein CSS-Framework für Leute, die Besseres zu tun haben

Beards beliebteste und polarisierendste Funktion sind seine Hilfsklassen. Viele Leute sind der Meinung, dass Utility-Klassen wie die, die Beard für Sie generiert, zu Bloat führen und genauso schlecht sind wie die Verwendung von Inline-Styles. Wir haben festgestellt, dass eine reichhaltige Sammlung von Hilfsklassen Ihre Projekte einfacher zu erstellen, besser zu verstehen und kugelsicherer macht.

<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 wurde für das Design entwickelt und ist ein Framework zur Normalisierung von Stilen und Browserverhalten für die schnelle Entwicklung von reaktionsschnellen und zugänglichen Websites.

<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

• Klassen sind für visuelles Styling. Tags sind für Semantik.
• Beginnen Sie mit einer guten Grundlage von Basis-HTML-Elementstilen.
• Verwenden Sie Utility-Klassen für DRY-CSS.
• Klassennamen sollten auf einen Blick verständlich sein.
• Responsives Layout-Styling sollte einfach sein (sogar Spaß machen).

<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

Ein Utility-First CSS-Framework für schnelle UI-Entwicklung

Dieses Ding existiert noch nicht einmal und sie haben über 700 Twitter-Follower. Eine solche Sache überzeugt mich, dass es ein echtes Verlangen nach diesen Dingen gibt, das nicht ignoriert werden sollte. Wir können uns jedoch eine Vorschau auf ihre Promo-Website ansehen

<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>

Utility-Bibliotheken als Styleguides

Marvel

Während Marvel weiter wächst, sowohl als Produkt als auch als Unternehmen, ist eine Herausforderung, vor der wir stehen, zu lernen, wie wir die Markenidentität von Marvel verfeinern und sie kohärent auf jedes unserer Produkte anwenden. Wir haben diesen Styleguide erstellt, der als zentraler Ort dient, an dem wir ein Live-Inventar von UI-Komponenten, Markenrichtlinien, Marken-Assets, Code-Snippets, Entwicklerrichtlinien und mehr beherbergen.

<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 ist BuzzFeeds CSS-Styleguide. Beeinflusst von Frameworks wie Basscss, verwendet Solid unveränderliche, atomare CSS-Klassen, um Funktionen schnell zu prototypisieren und zu entwickeln, und bietet konsistente Styling-Optionen sowie die Flexibilität, neue Layouts und Designs zu erstellen, ohne zusätzliche CSS schreiben zu müssen.

<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>

Dies ist getrennt, aber verwandt mit der Idee von CSS-in-JS

Die Welle in JavaScript hat sich stark in Richtung Komponenten bewegt. Die Kombination von HTML und JavaScript hat sich für viele Leute gut angefühlt, daher ist es nicht überraschend, dass sich das Styling zu diesem Trend gesellt. Und das nicht nur um des Selbstwillens willen. Es gibt verständliche Argumente dafür, darunter Dinge wie die globale Natur von CSS, die zu Konflikten und unbeabsichtigten Nebenwirkungen führt. Wenn Sie Dinge so stylen können, dass dies nie passiert (was nicht bedeutet, dass Sie auf CSS ganz verzichten müssen), gebe ich zu, dass ich den Reiz sehe.

Diese Idee, Komponenten auf JavaScript-Ebene zu stylen, scheint die Notwendigkeit von Utility-Bibliotheken weitgehend zu negieren. Wahrscheinlich eher eine oder die andere Sache.