Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS – You’ve Been Doing It Wrong

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Harry Roberts 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.

Avatar for Harry Roberts

Harry Roberts

June 04, 2013
Tweet

More Decks by Harry Roberts

See All by Harry Roberts
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k
cache rules everything
Avatar for Harry Roberts csswizardry
5
3.6k
My Website Is Slow!
 Where Do I Start?
Avatar for Harry Roberts csswizardry
5
530
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
Get Your Head Straight
Avatar for Harry Roberts csswizardry
15
21k
From Milliseconds
 to Millions: A Look at the Numbers Powering Web Performance
Avatar for Harry Roberts csswizardry
1
2.7k
More Than You Ever Wanted to Know About Resource Hints
Avatar for Harry Roberts csswizardry
6
9.8k
It’s My (Third) Party, and I’ll Cry if I Want To
Avatar for Harry Roberts csswizardry
13
5.8k

Other Decks in Design

See All in Design
デザインするために「多様性」について考える
Avatar for なつ iflection
0
180
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
600
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
Avatar for MIXI DESIGN mixi_design
PRO
1
180
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
4
660
AI情報に溺れながら、それでも頑張って泳ぐための思考法
Avatar for Iori67 yoriss67
0
130
Figmaレクチャー会Part1 基本のき編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
2
210
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
1.4k
Drawing for Animation
Avatar for Mandalyn Teo lynteo
2
180
デザイナーがAIを使い倒して爆速プロダクト開発！社内ハッカソンでの取り組み紹介
Avatar for 都村　美帆 abokadotyann
9
2.9k
新規AIプロダクトで、事前に知るべきだった3つの壁 〜医療AIを1年間作って、従来の開発が通用しなかった話〜 / Three Walls in Building AI Products
Avatar for Takuya Shikichi shikichee
2
3.1k
2026年の勢い / Momentum for 2026
Avatar for bebe bebe
0
340
はじめての演奏会フライヤーデザイン
Avatar for Kaito Kikuchi chorkaichan
1
220

Featured

See All Featured
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
62
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
54
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
8k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
90
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.1k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
110
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.7k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
160
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
180

Transcript

  1. CSS – You’ve Been Doing It Wrong

  2. Harry Roberts @csswizardry @

  3. None

  4. CSS – You’ve Been Doing It Wrong

  5. Should designers code?

  6. Sure! But not as designers.

  7. ‘We all know developers shouldn’t design.’

  8. 1955: FORTRAN

  9. 1996: CSS

  10. Programmers have had a 41 year head start!

  11. We should listen to developers.

  12. Abstractions

  13. Object orientation

  14. Performance first

  15. DRY

  16. Single Responsibility Principle

  17. KISS

  18. CSS != ‘Code’

  19. DRYness

  20. DRYness Robustness

  21. DRYness Scalability Robustness

  22. DRYness Scalability Robustness Performance

  23. DRYness Scalability Maintainability Robustness Performance

  24. DRYness Efficiency Scalability Maintainability Robustness Performance

  25. DRYness Efficiency Scalability Maintainability Modularity Robustness Performance

  26. DRYness Efficiency Scalability Maintainability Modularity Robustness Portability Performance

  27. DRYness Efficiency Scalability Maintainability Readability Modularity Robustness Portability Performance

  28. Over engineered

  29. Complex

  30. Spaghetti code

  31. Developers have been listening to designers :(

  32. <?= date("Y") ?>

  33. ‘No extra markup!’

  34. ‘Semantic classes!’

  35. Prettiness

  36. Hand crafting

  37. Gold plating

  38. Complexity

  39. CSS is pretty poor…

  40. …but you can write it better.

  41. Write CSS with a developer’s mind.

  42. CSS – You’ve Been Doing It Wrong

  43. Harry Roberts @csswizardry @