Building Scalable Design Systems using functional css
A primer to Tailwind CSS
A little bit about myself
Software engineering student, HIT
Founder of Progic, company of one
Full-stack Web Developer
Passionate about all things design
First, CSS is HARD!
First, CSS is HARD!
It has a ton of Issues
Cross browser Compatibility
Scary to change
Naming classes is hard
..and so on
Especially as the projects & teams grows larger
Design Systems to the Rescue
Design Systems, What are they?
A Design System is a systematic approach to product development — complete with guidelines, principles, philosophies, and code. It shines a spotlight on how a team designs, making it a fantastic tool for scaling your design practice, reducing the need for hand-off and promoting more collaboration.
What makes up a Design System?
A Governance model
Functional CSS, What 🤔
Also known as Utility/Atomic CSS
The definition of functional
Of or having a special activity, purpose, or task; relating to the way in which something works or operates.
With CSS, your classes should apply one visual effect and apply that every single time.
So your CSS becomes made up of many small parts, that can be composed to give a specific visual effects
<div class="card"> <div class="card__img"> <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df" alt="Woman paying for a purchase"> </div> <div class="card__body"> <div class="card__body-header">Marketing</div> <a href="#" class="card__body-subtitle"> Finding customers for your new business </a> <p class="card__body-text"> Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p> </div> </div>
Current state of things
<div class="md:flex"> <div class="md:flex-shrink-0"> <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df" alt="Woman paying for a purchase"> </div> <div class="mt-4 md:mt-0 md:ml-6"> <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div> <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline"> Finding customers for your new business </a> <p class="mt-2 text-gray-600"> Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p> </div> </div>
Using Tailwind CSS
Why are you polluting the HTML with all those classes 🤮
This is a common reaction to people who see functional css for the first time
We have been trained, since day one, to write 'semantic css'
We have been writing CSS that is coupled with the DOM
This way of writing UI code has sort of an acquired taste
Let's explore the current state and benefits that functional css provide
The way we currently write CSS is the reason why CSS becomes more complex as the project grows
Taking a component-first approach to CSS means you create components for things even if they will never get reused. This premature abstraction is the source of a lot of bloat and complexity in stylesheets.
Functional CSS allows you to write code that is easy to delete
Delete your HTML without worrying about the corresponding CSS
Seperation of concerns
Functional CSS allows you to write UI code without having to write any CSS (demo)
CSS file does not grow over time
Perfectly decoupled from DOM structure
Functional CSS allows you to CSS that is performant
Functional css has a flat structure, so no expensive selectors or complex nesting
Functional css tends to have smaller css files, so our sites/apps load faster
Functional CSS allows non CSS-focused developers to work effectively
No need to know the intricacies of CSS to build decent User Interfaces
Functional classes allow abstraction, inline styles don't
Functional classes can be named and re-used, inline styles can't
Inline styles do not support features like hover, active and focus states
Functional classes provide a set of constraints
The constraints ensure consistency across the whole design making functional css the perfect design system language
Inline styles (and regular css too) allow you to freely use any values.
I'm sold. But I have to write all those classes all the time? 😭
Suprise, surprise, you won't have to. In most cases you write them just once
You can abstract it at component level (Vue, React, Svelte, etc)
You can abstract it at css level using @apply in TailwindCss
Be open minded & let go of your preconceptions
Write UI without writing any css
Save yourself from premature abstraction with functional CSS
Utility first, Abstract later
Design systems ensure consistency & functional CSS enforces it
Functional CSS is not an all or nothing solution
Explore & Experiment
Links & Resources
Functional CSS at Scale: Clean & composable UI on a massive app)
A utility-first CSS framework for rapidly building custom designs.
Podcast: Alasdair Monk - Scaling CSS at Heroku with Utility Classes
An organized and frequently updated collection of Design System examples
Building Scalable Design Systems using
By Kudakwashe Paradzayi