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
390
How to Think Like a Performance Engineer
csswizardry
22
1.4k
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
(第1回) アーキテクト・テックリード育成講座
masakaya
0
160
Tableau曲線表現講座(2024.11.21)
cielo1985
0
260
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
280
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
570
How to go from research data to insights?
mastervicedesign
0
220
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.1k
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
190
Goodpatch Tour💙 / We are hiring!
goodpatch
31
800k
マンガで分かるサービスデザインガイドライン
senryakuka
1
640
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
3
3.5k
NAHO SHIMONO_Portfolio2025
nahohphp
0
160
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Building an army of robots
kneath
303
45k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
410
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Practical Orchestrator
shlominoach
186
10k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
It's Worth the Effort
3n
184
28k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.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 @