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
10
670
How to Think Like a Performance Engineer
csswizardry
24
1.7k
cache rules everything
csswizardry
5
3.4k
My Website Is Slow! Where Do I Start?
csswizardry
5
480
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Get Your Head Straight
csswizardry
15
20k
From Milliseconds to Millions: A Look at the Numbers Powering Web Performance
csswizardry
1
2.5k
More Than You Ever Wanted to Know About Resource Hints
csswizardry
6
9.3k
It’s My (Third) Party, and I’ll Cry if I Want To
csswizardry
13
5.5k
Other Decks in Design
See All in Design
portfolio_YumiYasuda
yum0418
0
290
デザイナーとPMの両ロール_3つのポイント
toy1618
1
330
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
150
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
1.5k
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
120
AIで加速するアクセシビリティのこれから
magi1125
3
540
DC Style Redesign
mcduckyart
0
130
harutaka Vision Deck
zenkigenforrecruit
0
140
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
0
1.2k
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
530
How to get a Tiger to Tulsa
mcduckyart
0
110
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.3k
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Unsuck your backbone
ammeep
671
58k
KATA
mclloyd
30
14k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
GitHub's CSS Performance
jonrohan
1031
460k
How STYLIGHT went responsive
nonsquared
100
5.6k
Typedesign – Prime Four
hannesfritz
42
2.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Docker and Python
trallard
44
3.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
720
Building Adaptive Systems
keathley
43
2.6k
Code Reviewing Like a Champion
maltzj
524
40k
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 @