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
3
370
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
LLMによるRAG評価用合成テストデータの生成
licux
6
660
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
150
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
5
870
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.4k
Masked shaman-Storyboard 2025
ashley0521
0
160
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
66k
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
210
portfolio2025_kanakoohata
kanako106
0
660
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
550
ネットワークセキュリティ科 学科紹介
sklbj_unz
0
160
最速[要出典]アクセシビリティチェック
magi1125
2
200
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Bash Introduction
62gerente
610
210k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Faster Mobile Websites
deanohume
306
31k
Six Lessons from altMBA
skipperchong
27
3.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
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 @