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
11
890
How to Think Like a Performance Engineer
csswizardry
27
2k
cache rules everything
csswizardry
5
3.5k
My Website Is Slow! Where Do I Start?
csswizardry
5
510
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.5k
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
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
190
株式会社バクタム 会社説明資料
bactum
0
360
ユーザー像を「みてね」らしく可視化する 家族アルバムみてねUXリサーチチームの取り組み
mixi_design
PRO
1
210
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
700
佐藤千晶|ポートフォリオ
chimi_chia
0
170
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
visional_engineering_and_design
0
280
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
190
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
spring_aki
1
110
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
410
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
270
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
630
What makes a great Director?
_limex_
0
310
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
900
The Language of Interfaces
destraynor
162
25k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
We Have a Design System, Now What?
morganepeng
53
7.8k
Building Adaptive Systems
keathley
43
2.8k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Become a Pro
speakerdeck
PRO
29
5.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Embracing the Ebb and Flow
colly
88
4.8k
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 @