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
620
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
470
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
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1k
freee + Product Design FY25Q4
freee
4
14k
harutaka Vision Deck
zenkigenforrecruit
0
110
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
2.8k
AI時代に淘汰されないデザインのしごと
akinen
0
120
AIで加速するアクセシビリティのこれから
magi1125
3
480
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
110
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.4k
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
450
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
160
Crisp Code inc. ブランドガイドライン
so_kotani
1
180
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
The Invisible Side of Design
smashingmag
299
50k
Why Our Code Smells
bkeepers
PRO
337
57k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Being A Developer After 40
akosma
90
590k
How GitHub (no longer) Works
holman
314
140k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Code Review Best Practice
trishagee
68
18k
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 @