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
820
How to Think Like a Performance Engineer
csswizardry
26
1.9k
cache rules everything
csswizardry
5
3.5k
My Website Is Slow! Where Do I Start?
csswizardry
5
500
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Get Your Head Straight
csswizardry
15
20k
From Milliseconds to Millions: A Look at the Numbers Powering Web Performance
csswizardry
1
2.6k
More Than You Ever Wanted to Know About Resource Hints
csswizardry
6
9.4k
It’s My (Third) Party, and I’ll Cry if I Want To
csswizardry
13
5.6k
Other Decks in Design
See All in Design
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
270
portfolio.pdf
onof003
0
160
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.4k
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
1.8k
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
150
株式会社バクタム 会社説明資料
bactum
0
340
アクセシビリティに取り組むメリット
magi1125
2
250
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
730
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
Findyのプロデチームの 歩みとこれから
satty9556
0
260
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
3.8k
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
250
Featured
See All Featured
The Language of Interfaces
destraynor
161
25k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
It's Worth the Effort
3n
187
28k
Scaling GitHub
holman
463
140k
How to Ace a Technical Interview
jacobian
279
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
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 @