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

CSS – You’ve Been Doing It Wrong

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
Build for the Web, Build on the Web, Build With the Web
Avatar for Harry Roberts csswizardry
0
290
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.5k
cache rules everything
Avatar for Harry Roberts csswizardry
5
3.7k
My Website Is Slow!
 Where Do I Start?
Avatar for Harry Roberts csswizardry
5
560
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

Other Decks in Design

See All in Design
TWCP#21 UXデザインと哲学のはなし
Avatar for MAMIYA Shinsuke shinn
0
310
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
760
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
330
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは？～操作を減らし、成果を最大にするための設計～
Avatar for NCDC ncdc
1
280
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
2
27k
From the Visible Crossroads: Turning Outputs into Outcomes
Avatar for takai_kanako takaikanako
2
1.3k
これからの「Webデザイン」の話をしよう～デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値～
Avatar for ミヤケアツシ ds35mm
0
600
インハウスデザイン組織で挑む自社ブランディング
Avatar for MIXI DESIGN mixi_design
PRO
0
130
爆速開発でAIプロダクトが40万インプレッションになった話
Avatar for つぶら tsubura
0
210
kintone Style Book
Avatar for kintone kintone
6
12k
AI時代、デザイナーの価値はどこに？
Avatar for Ryotaro Takahashi tararira
0
810
Vibe Coding デザインシステム
Avatar for poteboy poteboy
3
1.7k

Featured

See All Featured
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
1
160
Side Projects
Avatar for Sacha Greif sachag
455
43k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
400
Abbi's Birthday
Avatar for Violet Bock coloredviolet
2
5.6k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
160
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.5k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
130
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
150
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
170
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
2.5k

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 @