Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Utility CSS
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Daniel Fosco
May 23, 2018
Design
2
76
Utility CSS
A small presentation highlighting the advantages (and pitfalls) of utility-based CSS
Daniel Fosco
May 23, 2018
Tweet
Share
More Decks by Daniel Fosco
See All by Daniel Fosco
Let's talk about design portfolios
dfosco
3
110
Utility CSS 2019
dfosco
0
86
UX Design – What, Why, How
dfosco
0
190
Portfolio Talk
dfosco
0
110
UX Design – Primeiros Passos
dfosco
1
120
CSS Modular — Boas Práticas e Bizus
dfosco
1
110
Other Decks in Design
See All in Design
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
360
DMMデザイナーの “AI活用の現在と未来”
takumasaito
1
430
2026年、デザイナーはなにに賭ける?
0b1tk
0
470
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
0
280
kintone Style Book
kintone
6
10k
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
bitkey
PRO
0
250
Emmy's Artwork
mcksmith
0
190
TWCP#21 UXデザインと哲学のはなし
shinn
0
260
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
mixi_design
PRO
1
180
OSO2025-マサカリと太陽:伝え方の情報デザイン
majimasachi
0
670
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
mewmo
PRO
0
160
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
securecat
0
190
Featured
See All Featured
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
1.9k
Balancing Empowerment & Direction
lara
5
880
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
250
It's Worth the Effort
3n
188
29k
Agile that works and the tools we love
rasmusluckow
331
21k
Faster Mobile Websites
deanohume
310
31k
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
580
Mind Mapping
helmedeiros
PRO
0
78
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
320
Believing is Seeing
oripsolob
1
53
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
72
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
60
42k
Transcript
UTILITY-BASED CSS
None
None
None
“Just use BEM”
THE PROBLEM WITH CONVENTION IS THAT IT'S USUALLY OPTIONAL
None
A BUNCH OF SMALL PROPERTIES THAT JUST DO A SINGLE
THING
None
None
None
A UTILITY CLASS FOR EVERYTHING
.padding-top-smallest .padding-top-smaller .padding-top-small .padding-top-medium .flex .flex-column .flex-row .bg-primary .bg-primary-light .bg-primary-lighter
.bg-primary-lightest
None
None
None
None
GOOD DEFAULTS SENSIBLE SCALE
None
None
None
YOU DON'T WRITE CSS YOU JUST USE CSS (MOSTLY)
THE GOOD OPTIONS ARE YOUR ONLY OPTIONS (MOSTLY)
A CONSTRAINED SET OF TOOLS INSTEAD OF CONVENTIONS (MOSTLY)
DEMO
THE CLEAR DOWNSIDE... IS THAT YOU HAVE TO GET USED
TO IT
STYLES DON'T OVERWRITE EACH OTHER NO SIDE-EFFECTS
None
YOU DON'T NEED TO KEEP TRACK OF YOUR CSS
None
PERFORMANCE
None
184
123
.db { display: block } .fl { float: left }
65% REDUCTION
BFFS WITH BUI
REFACTORING CSS HOLDS VERY LITTLE BUSINESS VALUE
1. Get feedback and align with IQ 2. Refine library
to only what we need 3. Document and make it accessible to designers 4. Merge with BUI (what makes sense)
THANKS GO/ATOMIC-CSS-LINKS