Building Scalable Design Systems using functional css

@ProgicHQ

A primer to Tailwind CSS

A little bit about myself

Kudakwashe Paradzayi

Software engineering student, HIT

Founder of Progic, company of one

Full-stack Web Developer

www.kudapara.co.zw

@ProgicHQ

@kudapara

dev.to/kudapara

Passionate about all things design

and TailwindCSS

First, CSS is HARD!

@ProgicHQ

Title Text

First, CSS is HARD!

@ProgicHQ

It has a ton of Issues

Cross browser Compatibility

Specificity Issues

The Cascade

Scary to change

Naming classes is hard

..and so on

Especially as the projects & teams grows larger

Design Systems to the Rescue

@ProgicHQ

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.

- range.io

@ProgicHQ

What makes up a Design System?

Design Language

Design Kit

Component Library

Sandbox:

Documentation

A Governance model

@ProgicHQ

Examples

@ProgicHQ

https://designsystemsrepo.com/

Functional CSS, What 🤔

Also known as Utility/Atomic CSS

@ProgicHQ

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

Title Text

Example

<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

@ProgicHQ

Example

<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

@ProgicHQ

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

@ProgicHQ

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

Why should I even care? 🙄

The way we currently write CSS is the reason why CSS becomes more complex as the project grows

@ProgicHQ

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.

- Adam Wathan