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
380
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.6k
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
570
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.7k
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
体験負債を資産に変える組織的アプローチ
Avatar for hikarutakase hikarutakase
0
1.2k
Mandalyn_DT5001_FinalAssignment.pdf
Avatar for Mandalyn Teo lynteo
0
230
AI時代に求められるUXデザインのアプローチ
Avatar for xtone xtone
1
4.3k
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは？～操作を減らし、成果を最大にするための設計～
Avatar for NCDC ncdc
1
630
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
Avatar for mewmo mewmo
0
240
なぜ、インサイトを貯めるのか？
Avatar for 田島佳穂 tajima_kaho
2
1.9k
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
3
28k
Design dependencies
Avatar for Teba_eleven teba_eleven
0
110
チームをデザイン対象にする / Design for your team
Avatar for 株式会社カミナシ kaminashi
1
1.4k
つくり方を変えていく | change-how-we-build
Avatar for mottox2 mottox2
2
1.3k
Diverse Design Team Deck
Avatar for Diverse diverse
0
1.8k
2026年の勢い / Momentum for 2026
Avatar for bebe bebe
0
440

Featured

See All Featured
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
320
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
380
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.8k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
200
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
280
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
230
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
240
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
190
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
230

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 @