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
470
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.2k
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
590
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.8k
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
10k

Other Decks in Design

See All in Design
社長の宿題への回答 「新卒×AI」が生み出す価値
Avatar for さき saki822
2
170
研修担当者が一番伸びた　熊本市役所✕AI『泥臭いAI研修』のワークショップ設計について
Avatar for @Garyuten garyuten
2
430
【優秀賞＋特別賞】くまモン食いしん坊弁当「くまモンの魔法の柑橘弁当」最終審査資料
Avatar for Shoko shoko_seven11
0
220
セブンデックス プロジェクト事例 / innovation Scenes
Avatar for セブンデックス sevendex
1
1.2k
AIでデザインをつくる：基礎編
Avatar for 太田賢一 kenichiota0711
4
3.2k
図面資産×AI 眠れる資産を起こす挑戦
Avatar for 青野正寛 aonomasahiro
0
170
全員がアウトプットを出せる時代、 誰を採用する?
Avatar for NishaMe nishame
0
600
2026年の勢い / Momentum for 2026
Avatar for bebe bebe
0
490
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
Avatar for koyaman koyaman
1
2k
AI時代に求められるUXデザインのアプローチ
Avatar for xtone xtone
1
6.4k
Drawing_for_Anim_Final_PDF.pdf
Avatar for Mandalyn Teo lynteo
2
170
CULTURE DECK／Marketing Director
Avatar for M-HAND,Inc. mhand01
0
1.4k

Featured

See All Featured
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
52k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
410
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
210
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
610
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
1k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.2k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
550
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.9k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.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 @