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
Daniel Fosco
May 23, 2018
Design
2
71
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
82
UX Design – What, Why, How
dfosco
0
180
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
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
2
960
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.4k
mento Design Team Portfolio
mento0fficial
1
630
sachi_y_portfolio
sachi337
0
510
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
190
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
130
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
400
CursorでAI活用のナレッジベースを構築する
kanzaki
0
660
Bulletproof Design System with TypeScript
takanorip
7
4k
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.2k
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
160
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
420
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Into the Great Unknown - MozCon
thekraken
40
2k
Code Reviewing Like a Champion
maltzj
525
40k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Typedesign – Prime Four
hannesfritz
42
2.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Writing Fast Ruby
sferik
628
62k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Documentation Writing (for coders)
carmenintech
74
5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
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