Why is Utility-first CSS
wrong
awesome?
Who am I?
Tim Carry
Public Speaking Coach
Indie Hacker
@
pixelastic
Tim Carry
TechLunch
HumanTalks
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!
<div style="background-color: #badc07; font-size: 15px;">
Anyone can put anything in it
Can only be overriden by !important
<div style="bg-blue text-1">
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
C
ompositing
S
tyle
S
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