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
CSS – You’ve Been Doing It Wrong
Search
Harry Roberts
June 04, 2013
Design
14
3k
CSS – You’ve Been Doing It Wrong
CSS – You’ve Been Doing It Wrong, Hey!Stac, Leeds. June 2013.
Harry Roberts
June 04, 2013
Tweet
Share
More Decks by Harry Roberts
See All by Harry Roberts
cache rules everything
csswizardry
2
2.1k
My Website Is Slow! Where Do I Start?
csswizardry
4
260
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Get Your Head Straight
csswizardry
14
17k
From Milliseconds to Millions: A Look at the Numbers Powering Web Performance
csswizardry
1
2.1k
More Than You Ever Wanted to Know About Resource Hints
csswizardry
6
8.6k
It’s My (Third) Party, and I’ll Cry if I Want To
csswizardry
13
5.1k
FaCSSt: CSS & Performance
csswizardry
26
3.7k
Vim for Front-end Developers
csswizardry
12
5.9k
Other Decks in Design
See All in Design
スマートバンクのプロダクトデザイン
putchomsmartbank
2
690
現象と向き合うデザイン @Spectrum Tokyo Festival 2023
hirokazu_oda
3
1.4k
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.9k
丸井グループが取り組むエンタープライズアジャイルと プロダクトマネージャーの役割
muture
0
310
プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
300
The Fight
euralisw
0
120
Ride or Die Animatics
warwatkar
0
140
231206_Book-launch-event_kato
hjmkth
2
1.2k
PRDがデザインプロセスを高速化した話
tooomo
1
410
Designing UIs without a UI designer
strongeron
0
150
20240120_画像生成AI_NovelAI入門・情報収集
doradora09
PRO
0
130
#コムデナ vol.2 「初めてのデザインカンファレンス協賛!共有したい3つのやらかし」
kiyoshifuwa
1
350
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
43
6.8k
A Tale of Four Properties
chriscoyier
153
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
82
44k
Producing Creativity
orderedlist
PRO
338
39k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
Embracing the Ebb and Flow
colly
80
4.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Transcript
CSS – You’ve Been Doing It Wrong
Harry Roberts @csswizardry @
None
CSS – You’ve Been Doing It Wrong
Should designers code?
Sure! But not as designers.
‘We all know developers shouldn’t design.’
1955: FORTRAN
1996: CSS
Programmers have had a 41 year head start!
We should listen to developers.
Abstractions
Object orientation
Performance first
DRY
Single Responsibility Principle
KISS
CSS != ‘Code’
DRYness
DRYness Robustness
DRYness Scalability Robustness
DRYness Scalability Robustness Performance
DRYness Scalability Maintainability Robustness Performance
DRYness Efficiency Scalability Maintainability Robustness Performance
DRYness Efficiency Scalability Maintainability Modularity Robustness Performance
DRYness Efficiency Scalability Maintainability Modularity Robustness Portability Performance
DRYness Efficiency Scalability Maintainability Readability Modularity Robustness Portability Performance
Over engineered
Complex
Spaghetti code
Developers have been listening to designers :(
<?= date("Y") ?>
‘No extra markup!’
‘Semantic classes!’
Prettiness
Hand crafting
Gold plating
Complexity
CSS is pretty poor…
…but you can write it better.
Write CSS with a developer’s mind.
CSS – You’ve Been Doing It Wrong
Harry Roberts @csswizardry @