Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Utility CSS 2019
Daniel Fosco
March 18, 2019
Design
0
22
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
81
UX Design – What, Why, How
dfosco
0
56
Portfolio Talk
dfosco
0
74
Utility CSS
dfosco
2
55
UX Design – Primeiros Passos
dfosco
1
96
CSS Modular — Boas Práticas e Bizus
dfosco
1
93
Other Decks in Design
See All in Design
ujeza_final.pdf
ujki
0
680
品質向上を目指す開発組織のデザインレビュー / SmartHR
kgsi
3
1.7k
「SPACE DESIGN × DX」 - 店舗・オフィス等の空間DX伴⾛⽀援 -
pointedge
0
290
Overflow - IdentityDeck
overflowinc
0
2.1k
Similarities Between Building Construction and Software Design Systems
shotakugawa_meijin
0
210
Going in Circles
pandemonay
1
110
20220120modelinglt_miure
miure
1
250
Oh my teeth | BrandBook Creative for Partners
mkt
PRO
0
110
アンドパッドのデザインシステムの今までとこれから
sizucca
2
1.2k
ダークモード対応に困ったときの便利な処方箋 / Color scheme for dark mode
featherplain
2
460
Designing for trust: Applying Promise Theory to collaborate effectively with your remote teams
akiramotomura
0
230
デザイン編 Hatena Engineer Seminar #19
takuwolog
2
610
Featured
See All Featured
What's new in Ruby 2.0
geeforr
336
30k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
125
8.5k
The Most Common Mistakes in Cover Letters
jrick
PRO
4
24k
Bash Introduction
62gerente
596
210k
Building a Scalable Design System with Sketch
lauravandoore
447
30k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
The World Runs on Bad Software
bkeepers
PRO
56
5.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
268
11k
Producing Creativity
orderedlist
PRO
333
37k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.1k
Unsuck your backbone
ammeep
659
55k
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