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 2019
Search
Daniel Fosco
March 18, 2019
Design
0
49
Utility CSS 2019
Updated version of my presentation highlighting the advantages (and pitfalls) of utility-based CSS
Daniel Fosco
March 18, 2019
Tweet
Share
More Decks by Daniel Fosco
See All by Daniel Fosco
Let's talk about design portfolios
dfosco
3
95
UX Design – What, Why, How
dfosco
0
140
Portfolio Talk
dfosco
0
92
Utility CSS
dfosco
2
66
UX Design – Primeiros Passos
dfosco
1
110
CSS Modular — Boas Práticas e Bizus
dfosco
1
100
Other Decks in Design
See All in Design
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
220
UX/UI改善に貢献するユーザーテストとは? 基礎知識から実施のプロセスまで解説
ncdc
0
330
Product-Writing
aguringo
6
2.8k
1人歩きする営業資料作成
yutoshukuya
0
150
顕在化されていない期待、デザインの灯台
daitorii
1
1.1k
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
200
2024デザすぷVol.4 新年会/ Design Sprout Bar vol-4
root_recruit
1
310
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
380
Portfolio 2023.07.28
helemarudesu
0
590
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.5k
現象と向き合うデザイン @Spectrum Tokyo Festival 2023
hirokazu_oda
3
1.3k
PRDがデザインプロセスを高速化した話
tooomo
1
280
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Scaling GitHub
holman
457
140k
Docker and Python
trallard
34
2.7k
It's Worth the Effort
3n
180
27k
GraphQLとの向き合い方2022年版
quramy
32
12k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
Visualization
eitanlees
136
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Ruby is Unlike a Banana
tanoku
96
10k
Facilitating Awesome Meetings
lara
42
5.6k
Product Roadmaps are Hard
iamctodd
44
9.7k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Transcript
UTILITY CSS
WHAT
WHAT HOW
WHAT HOW AND WHY
WHAT IS ATOMIC CSS FUNCTIONAL CSS
ATOMIC DESIGN BRAD FROST
None
None
.padding-small { padding: 15px; } .white { color: white }
.bg-blue { background-color: blue; }
None
None
.u-display-block { display: block } .u-display-inline { display: inline }
.u-display-inline-block { display: inline-block } .u-position-relative { position: relative }
None
None
None
None
None
None
REFACTOR ALL THE STYLES!
INSPIRATION TO MAKE OUR CSS MORE... CONSISTENT MANTAINABLE PERFORMANT
CONSISTENCY
None
None
GOOD DEFAULTS SENSIBLE SCALE
None
None
None
None
THE GOOD OPTIONS ARE YOUR ONLY OPTIONS
YOU DON'T WRITE CSS YOU JUST USE CSS
WRITE MARKUP
WRITE MARKUP → SAVE
WRITE MARKUP → SAVE → REFRESH
DEMO
MANTAINABILITY
None
FUNCTIONAL CSS FUNCTIONAL PROGRAMMING
PURE FUNCTIONS
FOR A GIVEN INPUT THE OUTPUT WILL ALWAYS BE THE
SAME
X × 2
2 × 2 → 4
2 × 2 → 4 3 × 2 → 6
2 × 2 → 4 3 × 2 → 6
2 × 2 → 5
.class { color: blue }
.another { color: red } .class { color: blue }
None
STYLES DON'T OVERWRITE EACH OTHER NO SIDE-EFFECTS
YOU DON'T NEED TO KEEP TRACK OF YOUR CSS
PERFORMANCE
The Problem with CSS
None
None
None
184
123
499
.db { display: block }
.fl { float: left }
None
WHAT DOES THIS MEAN IN REAL LIFE?
None
None
508KB TO 175KB 65% REDUCTION
IT CAN BE MADE EVEN SMALLER
m.booking.com
REFACTORING CSS HOLDS VERY LITTLE BUSINESS VALUE
How can we explore Atomic CSS to improve our user
experience and development process?
THANKS! !
bit.ly/functional-css-presentation