Styling In tHE YEAR 3022:

 

The Power of Utility-First, Token-based CSS

Photo by Fran . on Unsplash

What is a design system?

What is a component library?

What is a Styleguide?

Design system

Complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards.

Component Library

A subclass in the design system, this is the set of design patterns for use across a company. Inherently tied to the implementation details of the technology (React, Vue, etc)

Styleguide

Another subclass in the design system, this static documentation describes the design system itself: how products should look and feel, use cases for UI patterns, correct typographic scales, etc.

DOCS

tech (react, etc)

"tokenS"

Design TOkens

...design tokens are an agnostic way to store variables such as typography, color, and spacing so that your design system can be shared across platforms like iOS, Android, and regular ol’ websites.

Tokens & Atomic Design

What's lower than Atoms?

  • Padding
  • Text: size, style
  • Color: background, text
  • Border width, color, style, radius
  • Focused, active variations

Design Tokens: the subatomic particles of atomic design

Tokens: format?

Tokens are the hundreds of low-level, technology-agnostic design rules stored in the most consumable format.

 

Tokens are data.

Photo by Markus Spiske on Unsplash

Tokens: format?

Your tokens look like this right now, don't they.

How do you share Sass variables with JavaScript/Twig/etc?

Tokens: A better way

Tokens should be data.

 

Data should be fed to frameworks.

Tailwind

  1. The building blocks of your design system are thousands of utility classes (tokens).
  2. Components simply assemble these utility classes together.
  3. Utility classes are usable beyond your DOM framework.

Classic approach 

<div class="chat-notification">
  <div class="chat-notification__logo-wrapper">
    <img class="chat-notification__logo" src="logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification__content">
    <h4 class="chat-notification__title">ChitChat</h4>
    <p class="chat-notification__message">You have a new message!</p>
  </div>
</div>
<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification__logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification__logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification__content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification__title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification__message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

Utility classes approach 

<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="logo.svg" alt="ChitChat Logo">
  </div>
  <div class="ml-6 pt-1">
    <h4 class="text-xl text-gray-900 leading-tight">ChitChat</h4>
    <p class="text-base text-gray-600 leading-normal">You have a new message!</p>
  </div>
</div>

Utility Classes + BEM

<div class="chat-notification max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">
  <div class="chat-notification__logo-wrapper flex-shrink-0">
    <img class="chat-notification__logo h-12 w-12" src="logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification__content ml-6 pt-1">
    <h4 class="chat-notification__title text-xl text-gray-900 leading-tight">ChitChat</h4>
    <p class="chat-notification__message text-base text-gray-600 leading-normal">You have a new message!</p>
  </div>
</div>

"Separation of concerns "

"Separation of concerns" is a specious argument. Instead, think about dependency direction.

- Adam Wathan, Tailwind

There is no perfect, right answer.

CSS that depends on HTML.

  • Nested CSS, BEM

 

 

<main class="thing">
  <section class="thing__wrapper">
    <h1 class="thing__title">Hello world</h1>
  </section>
</main>
<style>
.thing__title { color: blue; }
main > section > h1 { color: red; }
</style>

HTML that depends on CSS.

  • Bootstrap, Tailwind

 

 

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>

(You still have variables/mixins)

@apply allows any utility class to be applied to any selector. 

<button class="btn-blue">
  Click me
</button>

<style>
.btn-blue {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
.btn-blue:hover {
  @apply bg-blue-700;
}
</style>

Tailwind Tooling

tailwind.config.js

PostCSS

CSS

CSS bundle

Every possible CSS attribute (colors, spacings, display, etc)

x

Every defined media query (none, sm, md, lg, xl)

x

Every pseudo state (hover, focus, etc)

Framework Original Size Minified Gzip Brotli
Tailwind 477.6kb 350.4kb 58.8kb 17.1kb
Bootstrap 187.8kb 152.1kb 22.7kb 16.7kb
Bulma 205.6kb 172.4kb 23.0kb 18.0kb
Foundation 154.1kb 119.2kb 15.9kb 12.9kb
Tachyons 111.7kb 71.8kb 13.4kb 7.5kb
Semantic UI 809.4kb 613.8kb 100.6kb 77.8kb
Materialize 175.0kb 138.5kb 21.1kb 17.1kb
=

!!!

Remove Unused CSS w/ PurgeCSS

  • PostCSS plugin
  • Analyze all templating languages for class name usage
  • Remove classes not referenced in templates
  • Parses logic (JS) as well to recognize class names
  • Example site: 477kb -> 20kb

1. Generate Tailwind CSS

2. If prod mode!

3. Throw away unused CSS

Tailwind Tooling

tailwind.config.js

PostCSS

CSS

PurgeCSS

Working with Designers

Design Systems are fundamentally about the constraints of possibility.

 

Consistency comes from reusability of existing rules.

 

Shared vocabulary

 

Documentation

FAQs

 

  • Isn't this the same as inline styles?
    • No, all classes are infinitely reusable and defined by the design system
  • But if my class names aren't semantic, it's really hard to grep the codebase to find where a specific element is defined!
    • BEM is still applicable and highly encouraged 
  • This makes the HTML bloated
    • This debloats CSS and makes inspecting HTML for style source easier. HTML is gzipped "across the wire" anyway.
  • How do I incorporate context, like changing the font color of a component if it's inside a specific wrapper?
    • Change via the templating technology, not via CSS cascade. Or, do change via CSS cascade. We can still write all the CSS we want anyway.
  • What if our designers don't use consistent attributes?
    • Tailwind can facilitate culture change within a design-dev team. Presenting a list of possible values is helpful in these discussions.

TLDR

Let robots help you make thousands of utility classes. Put those classes on the components in your design system. Use the components from your design system to build your apps.

Sources

Styling in 3022

By Christopher Bloom

Styling in 3022

Tailwind brings utility-first styling and design tokens to frontend development.

  • 2,832