$30 off During Our Annual Pro Sale. View Details »

CSS – You’ve Been Doing It Wrong

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
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
990
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.3k
cache rules everything
Avatar for Harry Roberts csswizardry
5
3.6k
My Website Is Slow!
 Where Do I Start?
Avatar for Harry Roberts csswizardry
5
520
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
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.6k
More Than You Ever Wanted to Know About Resource Hints
Avatar for Harry Roberts csswizardry
6
9.6k
It’s My (Third) Party, and I’ll Cry if I Want To
Avatar for Harry Roberts csswizardry
13
5.7k

Other Decks in Design

See All in Design
越境するデザイン人材：デザイナーが社会資本となる世界へ
Avatar for Goodpatch Inc. goodpatch
1
370
SAMSUL KAMAR ABDUL RAHMAN
Avatar for SAMSUL RAHMAN samsulrahman32
0
190
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
Avatar for インクルーシブデザインスタジオCULUMU culumu
1
510
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
Avatar for Hiroki Nagasawa pixyzehn
0
110
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.4k
これからの「Webデザイン」の話をしよう～デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値～
Avatar for ミヤケアツシ ds35mm
0
420
Findyのプロデチームの 歩みとこれから
Avatar for Satty satty9556
0
350
Figmaレクチャー会Part1 基本のき編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
0
160
Franks Myth
Avatar for George Frank Hayford-Taylor gfht1
0
340
Treasure_Hunting
Avatar for Sol Metts solmetts
0
110
Installing and Running decksh/pdfdeck
Avatar for Anthony Starks ajstarks
1
900
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
Avatar for 株式会社ルート root_recruit
0
230

Featured

See All Featured
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.1k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.7k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
0
470
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k

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 @