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
Site-Speed That Sticks
csswizardry
4
380
How to Think Like a Performance Engineer
csswizardry
22
1.3k
cache rules everything
csswizardry
3
3.1k
My Website Is Slow! Where Do I Start?
csswizardry
5
430
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Get Your Head Straight
csswizardry
15
19k
From Milliseconds to Millions: A Look at the Numbers Powering Web Performance
csswizardry
1
2.4k
More Than You Ever Wanted to Know About Resource Hints
csswizardry
6
9.1k
It’s My (Third) Party, and I’ll Cry if I Want To
csswizardry
13
5.4k
Other Decks in Design
See All in Design
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
3.4k
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
280
発表資料テンプレート / My slide template
thatblue
0
210
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
110
Dive Deep into Communication
yomtsu
0
210
Goodpatch Tour💙 / We are hiring!
goodpatch
31
790k
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
120
Museum Heist
allykae
0
140
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
570
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
190
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
150
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
880
Featured
See All Featured
Done Done
chrislema
182
16k
Optimizing for Happiness
mojombo
376
70k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
How to Ace a Technical Interview
jacobian
276
23k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
KATA
mclloyd
29
14k
A Tale of Four Properties
chriscoyier
158
23k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Making Projects Easy
brettharned
116
6k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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 @