Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

CSS – You’ve Been Doing It Wrong

Avatar for Harry Roberts Harry Roberts
June 04, 2013
Design
3k
14

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

More Decks by Harry Roberts

See All by Harry Roberts
Build for the Web, Build on the Web, Build With the Web
Avatar for Harry Roberts csswizardry
0
620
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.6k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.9k
cache rules everything
Avatar for Harry Roberts csswizardry
5
3.9k
My Website Is Slow!
 Where Do I Start?
Avatar for Harry Roberts csswizardry
5
610
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
4k
Get Your Head Straight
Avatar for Harry Roberts csswizardry
15
22k
From Milliseconds
 to Millions: A Look at the Numbers Powering Web Performance
Avatar for Harry Roberts csswizardry
1
2.8k
More Than You Ever Wanted to Know About Resource Hints
Avatar for Harry Roberts csswizardry
6
11k

Other Decks in Design

See All in Design
Agentic Design Workflowを育てる 「三層デザインハーネス」の現在地
Avatar for Sayaka Kubouchi sayadesign2
0
730
Look Dev Meetup #50
Avatar for Baku Hashimoto baku89
1
520
HeartLanguage - DesignProcess
Avatar for HeartLanguage heartlanguage
0
190
1000人規模の組織でデザインハーネスを導入するための第一歩
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
5
4.3k
デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み
Avatar for Kota SAITO kotasaito_cnt
0
1.2k
LP制作のための熱量ハーネス -人の熱量を、AIとの制作につなぐ-
Avatar for niccy niccy
0
1.7k
Rondo 1 Minute Short Storyboard
Avatar for Rachel Poon rezaline
0
100
Design_Harness_and_Loop.pdf
Avatar for 長津孝輔 nagatsu
0
110
工房としてのAI ── デザイナー、作家、ビルダー
Avatar for hiranotomoki hiranotomoki
0
530
東京都市大学 都市生活学部×一般社団法人オープン企画イベント　「誰もがデザイナーである」とはどういうことか？ 【エツィオ・マンズィーニ氏 特別来日・基調講演】
Avatar for Kimura Atsunobu a2k
1
140
富山デザイン勉強会_生成AIを使ったデザイン制作2026最新版.pdf
Avatar for keita keita_yoshikawa
0
150
デザインツールを開く前に その画面は誰に何と言わせたい？受託UIデザイナーが顧客解像度を高める 「打ち合わせの場での確かめ方」
Avatar for @Garyuten garyuten
1
260

Featured

See All Featured
Design in an AI World
Avatar for tapps tapps
1
350
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
610
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
2
400
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.5k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
4
54k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
590
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
370
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k

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 @