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
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
10
780
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
25
1.8k
cache rules everything
Avatar for Harry Roberts csswizardry
5
3.4k
My Website Is Slow!
 Where Do I Start?
Avatar for Harry Roberts csswizardry
5
490
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
Get Your Head Straight
Avatar for Harry Roberts csswizardry
15
20k
From Milliseconds
 to Millions: A Look at the Numbers Powering Web Performance
Avatar for Harry Roberts csswizardry
1
2.5k
More Than You Ever Wanted to Know About Resource Hints
Avatar for Harry Roberts csswizardry
6
9.4k
It’s My (Third) Party, and I’ll Cry if I Want To
Avatar for Harry Roberts csswizardry
13
5.6k

Other Decks in Design

See All in Design
Kid Cowboy 103
Avatar for Marilu Molina marilutwin
0
310
株式会社バクタム　会社説明資料
Avatar for Bactum Inc. bactum
0
290
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
Avatar for kkaru kkaru
0
520
新卒の目から見たサイボウズのデザイン組織
Avatar for 小林諒大 ryota5884
0
160
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
6
3.9k
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
Avatar for Shingo Suzuki shingo2000
1
1.6k
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
370
1920*1080pxに設定したケース / Google Slide Size Test
Avatar for Arthur arthur1
0
3.2k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
250
Them Middle School Kids Pitch
Avatar for Steven Vargas stevie_vee
0
120
株式会社Muture_ソーシャル推進事業
Avatar for Muture muture
PRO
0
130
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
Avatar for 山口哲弘 t2yamaguchi429
0
690

Featured

See All Featured
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
30
9.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
The Language of Interfaces
Avatar for Des Traynor destraynor
160
25k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
139
34k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
2
580
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k

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 @