Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS – You’ve Been Doing It Wrong

CSS – You’ve Been Doing It Wrong

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

Harry Roberts

June 04, 2013
Tweet

More Decks by Harry Roberts

Other Decks in Design

Transcript

  1. CSS – You’ve Been
    Doing It Wrong

    View Slide

  2. Harry Roberts
    @csswizardry
    @

    View Slide

  3. View Slide

  4. CSS – You’ve Been
    Doing It Wrong

    View Slide

  5. Should designers code?

    View Slide

  6. Sure!
    But not as designers.

    View Slide

  7. ‘We all know developers
    shouldn’t design.’

    View Slide

  8. 1955: FORTRAN

    View Slide

  9. 1996: CSS

    View Slide

  10. Programmers have had
    a 41 year head start!

    View Slide

  11. We should
    listen to developers.

    View Slide

  12. Abstractions

    View Slide

  13. Object orientation

    View Slide

  14. Performance first

    View Slide

  15. DRY

    View Slide

  16. Single Responsibility
    Principle

    View Slide

  17. KISS

    View Slide

  18. CSS != ‘Code’

    View Slide

  19. DRYness

    View Slide

  20. DRYness
    Robustness

    View Slide

  21. DRYness
    Scalability
    Robustness

    View Slide

  22. DRYness
    Scalability
    Robustness
    Performance

    View Slide

  23. DRYness
    Scalability
    Maintainability
    Robustness
    Performance

    View Slide

  24. DRYness
    Efficiency
    Scalability
    Maintainability
    Robustness
    Performance

    View Slide

  25. DRYness
    Efficiency
    Scalability
    Maintainability
    Modularity
    Robustness
    Performance

    View Slide

  26. DRYness
    Efficiency
    Scalability
    Maintainability
    Modularity
    Robustness
    Portability
    Performance

    View Slide

  27. DRYness
    Efficiency
    Scalability
    Maintainability
    Readability
    Modularity
    Robustness
    Portability
    Performance

    View Slide

  28. Over engineered

    View Slide

  29. Complex

    View Slide

  30. Spaghetti code

    View Slide

  31. Developers have been
    listening to designers :(

    View Slide

  32. = date("Y") ?>

    View Slide

  33. ‘No extra markup!’

    View Slide

  34. ‘Semantic classes!’

    View Slide

  35. Prettiness

    View Slide

  36. Hand crafting

    View Slide

  37. Gold plating

    View Slide

  38. Complexity

    View Slide

  39. CSS is pretty poor…

    View Slide

  40. …but you can
    write it better.

    View Slide

  41. Write CSS with a
    developer’s mind.

    View Slide

  42. CSS – You’ve Been
    Doing It Wrong

    View Slide

  43. Harry Roberts
    @csswizardry
    @

    View Slide