CSS – You’ve Been Doing It Wrong

Bb854891c46db72f4a6f9da4504e879a?s=47 Harry Roberts
June 04, 2013
Design
14
2.9k

CSS – You’ve Been Doing It Wrong

CSS – You’ve Been Doing It Wrong, Hey!Stac, Leeds. June 2013.

Bb854891c46db72f4a6f9da4504e879a?s=128

Harry Roberts

June 04, 2013
Tweet

More Decks by Harry Roberts

See All by Harry Roberts
Bb854891c46db72f4a6f9da4504e879a?s=48 csswizardry
1
1k
Bb854891c46db72f4a6f9da4504e879a?s=48 csswizardry
6
6k
Bb854891c46db72f4a6f9da4504e879a?s=48 csswizardry
13
4k
Bb854891c46db72f4a6f9da4504e879a?s=48 csswizardry
25
2.7k
Bb854891c46db72f4a6f9da4504e879a?s=48 csswizardry
12
5.2k
Bb854891c46db72f4a6f9da4504e879a?s=48 csswizardry
24
6.4k
Bb854891c46db72f4a6f9da4504e879a?s=48 csswizardry
118
44k
Bb854891c46db72f4a6f9da4504e879a?s=48 csswizardry
10
2k
Bb854891c46db72f4a6f9da4504e879a?s=48 csswizardry
25
2.4k

Other Decks in Design

See All in Design
730424f1e28fcff5ad7eab00e981fb14?s=48 takusami
5
550
32b869eccead66531b4749ea9f146aed?s=48 yuinamiki
0
440
Ed8d0bfdd4badbac64cefb21a5c7ae88?s=48 allenzhangart
0
160
4fe9c38064244b38e7cc7627135c5008?s=48 basakbuse
0
130
8b8d433ca23ddb6d5c1949e121b57383?s=48 karte
1
320
Aab4a3f4a7479c56027a9c9ca7bcbbaf?s=48 securecat
0
320
Ca63f6ee64787c337d905b069085324c?s=48 juliannaromero
1
170
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
5
140
1072d6756bbb658ad814bd2e92d8101c?s=48 nominochir
1
120
8ba8bdc8f653a517ed8c300fbec98f15?s=48 drthdan16
0
160
A7fb174034b2280a3122489125ad5473?s=48 garoogie
0
150
61979df46e0c6b1de27d9dbc37289838?s=48 alesaenzart
0
280

Featured

See All Featured
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
52
1.8k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
17k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
399
20k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
113
7k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
494
110k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
682
180k
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
334
15k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
222
46k
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
83
4.6k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
653
54k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
55
9.2k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
407
57k

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 @