Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
CSS – You’ve Been Doing It Wrong
Slide 2
Slide 2 text
Harry Roberts @csswizardry @
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
CSS – You’ve Been Doing It Wrong
Slide 5
Slide 5 text
Should designers code?
Slide 6
Slide 6 text
Sure! But not as designers.
Slide 7
Slide 7 text
‘We all know developers shouldn’t design.’
Slide 8
Slide 8 text
1955: FORTRAN
Slide 9
Slide 9 text
1996: CSS
Slide 10
Slide 10 text
Programmers have had a 41 year head start!
Slide 11
Slide 11 text
We should listen to developers.
Slide 12
Slide 12 text
Abstractions
Slide 13
Slide 13 text
Object orientation
Slide 14
Slide 14 text
Performance first
Slide 15
Slide 15 text
DRY
Slide 16
Slide 16 text
Single Responsibility Principle
Slide 17
Slide 17 text
KISS
Slide 18
Slide 18 text
CSS != ‘Code’
Slide 19
Slide 19 text
DRYness
Slide 20
Slide 20 text
DRYness Robustness
Slide 21
Slide 21 text
DRYness Scalability Robustness
Slide 22
Slide 22 text
DRYness Scalability Robustness Performance
Slide 23
Slide 23 text
DRYness Scalability Maintainability Robustness Performance
Slide 24
Slide 24 text
DRYness Efficiency Scalability Maintainability Robustness Performance
Slide 25
Slide 25 text
DRYness Efficiency Scalability Maintainability Modularity Robustness Performance
Slide 26
Slide 26 text
DRYness Efficiency Scalability Maintainability Modularity Robustness Portability Performance
Slide 27
Slide 27 text
DRYness Efficiency Scalability Maintainability Readability Modularity Robustness Portability Performance
Slide 28
Slide 28 text
Over engineered
Slide 29
Slide 29 text
Complex
Slide 30
Slide 30 text
Spaghetti code
Slide 31
Slide 31 text
Developers have been listening to designers :(
Slide 32
Slide 32 text
= date("Y") ?>
Slide 33
Slide 33 text
‘No extra markup!’
Slide 34
Slide 34 text
‘Semantic classes!’
Slide 35
Slide 35 text
Prettiness
Slide 36
Slide 36 text
Hand crafting
Slide 37
Slide 37 text
Gold plating
Slide 38
Slide 38 text
Complexity
Slide 39
Slide 39 text
CSS is pretty poor…
Slide 40
Slide 40 text
…but you can write it better.
Slide 41
Slide 41 text
Write CSS with a developer’s mind.
Slide 42
Slide 42 text
CSS – You’ve Been Doing It Wrong
Slide 43
Slide 43 text
Harry Roberts @csswizardry @