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

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
510
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.5k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.7k
cache rules everything
Avatar for Harry Roberts csswizardry
5
3.8k
My Website Is Slow!
 Where Do I Start?
Avatar for Harry Roberts csswizardry
5
600
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.9k
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.8k
More Than You Ever Wanted to Know About Resource Hints
Avatar for Harry Roberts csswizardry
6
10k

Other Decks in Design

See All in Design
猫魔法「ごろごろ」の紹介
Avatar for S.Shimizju gesho
0
110
「使いやすさ」だけでは、「勝てる」サービスにはならない。〜KPIとUXの分断を埋める、サービス戦略という「指針」〜
Avatar for 株式会社NIJIBOX nbkouhou
3
570
Saving_the_King_-_Storyboard.pdf
Avatar for Terence Basart terencebasart
0
270
体験負債を資産に変える組織的アプローチ
Avatar for hikarutakase hikarutakase
0
1.6k
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.8k
もう迷わない！“なんとなく”を卒業するフォントの選び方【村田俊英】
Avatar for 村田俊英 toshihidemurata
0
830
分散するデザイン組織をつなぐ　デザインミートアップの取り組み/nikkei-tech-talk49
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
160
ボタンUIの冪等性の話をしたらVimmerに刺さっちゃった
Avatar for たと ottatto
3
1.8k
エンジニアでも捗る デザイナー的思考入門(bitA Edit 新ver)
Avatar for Tsubasa SEKIGUCHI tinykitten
1
330
開閉UIのアニメーション設計
Avatar for hiro hiro0218
2
960
JBUG大阪#9_登壇資料_引き継ぎで困らないためのBacklogWikiの整え方_ミスと属人化を防ぐために、 “次の人が動ける状態”をどう残すか
Avatar for Beeworks Marketing Design webnaut
2
220
kintone開発における​ライターの役割の変化​〜AI活用を添えて〜 / Changes in the Role of Writers in Kintone Development
Avatar for keroyama keroyama
0
170

Featured

See All Featured
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
370
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.5k
Design in an AI World
Avatar for tapps tapps
1
280
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
340
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
490
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.3k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
270
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
2
3.8k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6.2k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
370
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
780

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 @