Christopher Bloom
Frontend developer, lover of design systems, CSS architecture, and all things javascript.
Styling In tHE YEAR 3022:
The Power of Utility-First, Token-based CSS
Christopher Bloom, @illepic
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.
What Are Design Tokens?, Photo by Amador Loureiro on Unsplash
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
- The building blocks of your design system are thousands of utility classes (tokens).
- Components simply assemble these utility classes together.
- 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
hands on!
Styling in 3022
By Christopher Bloom
Styling in 3022
Tailwind brings utility-first styling and design tokens to frontend development.
