Why is Utility-first CSS awesome?

Why is Utility-first CSS

wrong

awesome?

Who am I?

Tim Carry

Public Speaking Coach

Indie Hacker

pixelastic

Styling: BEM

<div class="user">
   <img src="…" class="user__picture" />
   <ul class="user__detailList">
     <li class="user__detail">
       Tim Carry
     </li>
     <li class="user__detail">
       @pixelastic
     </li>
     <li class="user__detail user__detail--disabled">
       None
     </li>
   </ul>
</div>

Styling: Utility-first

<div class="bg-white p-4 flex flex-row">
   <img src="…" class="w-4 h-4 rounded flex-none" />
   <ul class="flex-auto flex-col">
     <li class="flex-auto p-1">
       Tim Carry
     </li>
     <li class="flex-auto p-1">
       @pixelastic
     </li>
     <li class="flex-auto p-1 text-gray">
       None
     </li>
   </ul>
</div>

😱

Inline Styles!

Anyone can put anything in it

Can only be overriden by !important

Limited to a controlled API

As it's only a .class, easy to override

😱

Separation of Concerns!

You put your CSS in my HTML. You're breaking the separation of concerns

Separation of

Concerns

≠

Separation of

Filetypes

HTML and CSS work together

Useless

Unusable

Reduced Context-Switching

HTML

CSS

Browser

Styling: Utility-first

<div class="bg-white p-4 flex flex-row">
   <img src="…" class="w-4 h-4 rounded flex-none" />
   <ul class="flex-auto flex-col">
     <li class="flex-auto p-1">
       Tim Carry
     </li>
     <li class="flex-auto p-1">
       @pixelastic
     </li>
     <li class="flex-auto p-1 text-gray">
       None
     </li>
   </ul>
</div>

😱

Cascade!

Cascading

ompositing

tyle

heets

Composition Over Inheritance

Small classes that do one thing

Use several of them

Combine classes like Lego Blocks

Your styleguide as an API

Consistant spacing, colors and font size

Can only use what's defined

Easier to do it right™

😱

Repetition!

Abstraction?

<button class="px-2 py-1 ml-2 text-1 white bold bg-gray border-blue rounded shadow-1">
   Click Me!
</button>

Abstraction with @apply

<button class="button">
   Click Me!
</button>

.button {
 @apply px-2 py-1 ml-2;
 @apply text-1 white bold bg-gray;
 @apply border-blue rounded shadow-1;
}

😱

Performance!

It's actually pretty optimized

Parsing single class selectors is fast

@apply to reduce boilerplate

Perfect use-case for Gzip/Brotli

purgeCSS to remove unused classes

🤨

How can I try?

.inline-block

.whitespace-no-wrap

.float-left

.absolute

.opacity-50

.whitespace-pre

.underline

.fixed

.overflow-hidden

.order-first

.bold

.bg-repeat-y

.relative

.overflow-y-scroll

.hidden

.italic

.bg-cover

.border-dotted

.extrabold

.border-solid

.border-r-1

.bg-repeat

.my-3

.rounded

.lowercase

.float-none

.border-gray

.cursor-pointer

.px-2

.bg-contain

.bg-auto

.order-last

.semibold

.uppercase

.block

.invisible

.strike

.rounded-full

.items-center

.pointer-events-none

.capitalize

.border-1

.justify-center

.bg-repeat-x

.visible

.inline

Low level

Normalized

Pseudo-element prefix

.hover:

.focus:

.focus-within:

.active:

.disabled:

.visited:

.first-child:

.last-child:

Responsive prefixes

<div class="flex flex-column">
   <header class="flex-none w-100p p-1">Header</header>
   <section class="flex-auto flex flex-column lg:flex-row">
     <nav class="flex-none pb-3 lg:pb-0 lg:pr-3">
      Navigation
    </nav>
     <main class="flex-auto">Content</main>
   </section>
</div>

🧐

Conclusion

Everything I like about Utility-first CSS

I write less CSS

Styleguide as an API

Less context-switching

Projects are easier to maintain

...without losing anything else

Thank you!