Breaking Good Habits

Bb854891c46db72f4a6f9da4504e879a?s=47 Harry Roberts
February 12, 2012

Breaking Good Habits

Talk first given at The Digital Barn (Barnsley, UK) 11 February, 2012.

Bb854891c46db72f4a6f9da4504e879a?s=128

Harry Roberts

February 12, 2012
Tweet

Transcript

  1. 1.
  2. 5.

    Web standards… •A great idea? Definitely! •Well intentioned? You bet!

    •Ambiguous? Sadly :( •Open to interpretation? Unfortunately…
  3. 7.

    Best practices •Best for who? •What are we achieving? •What

    do we really want to achieve? •Are we always solving the right problems for the right people?
  4. 11.
  5. 23.
  6. 26.

    IDs •No advantage over classes. •Waaaaaay overly specific. •Not dissimilar

    to !important •Everything you can do with an ID can be done with a class.
  7. 27.

    Classes •No one uses classes except browsers and other developers

    (and microformats). •Classes are neither semantic or insemantic; they’re sensible or insensible.
  8. 28.
  9. 30.

    .red .red{ color:blue; /* WTF */ } <h1>I am a

    <span class=red>designer</span> and <span class=red>developer</span></h1>
  10. 31.

    .brand .brand{ color:#BADA55; /* FTW */ } <h1>I am a

    <span class=brand>designer</span> and <span class=brand>developer</span></h1>
  11. 32.
  12. 38.

    The media object bit.ly/cCY3Ew <div class=media> <img class=img> <p class=body>Lorem

    ipsum...</p> </div> .media,.body { overflow:hidden; } .img { float:left; margin-right:20px; } .img img { display:block; }
  13. 39.

    The media object bit.ly/cCY3Ew <div class=media> <img class=img> <div class=body>

    <p>Lorem ipsum...</p> <a href>Read more...</a> </div> </div>
  14. 40.
  15. 43.

    .nav{ list-style:none; margin-left:0; } .nav li{ display:inline; } .nav a{

    display:inline-block; } The nav abstraction bit.ly/oD2M9n
  16. 48.

    Double stranded heading hierarchy h1,.alpha { font-size:; line-height:; } h2,.beta

    { font-size:; line-height:; } h3,.gamma { font-size:; line-height:; } h4,.delta { font-size:; line-height:; } h5,.epsilon { font-size:; line-height:; } h6,.zeta { font-size:; line-height:; }
  17. 50.
  18. 52.
  19. 56.
  20. 58.
  21. 59.
  22. 60.
  23. 61.
  24. 62.
  25. 63.
  26. 64.
  27. 65.
  28. 66.
  29. 67.
  30. 68.

    Benefits and side- effects •Sites are faster to build… •…more

    robust •…more maintainable •…more consistent •…and incidentally more efficient.
  31. 69.

    Efficiency on the client side •Reused classes are ‘performance freebies’

    •Abstractions mean DRYer code; less to download and evaluate •Classes match quicker than descendants
  32. 70.

    Now what? •Solve problems for the right people. •Keep yourselves

    happy and sane. •Learn when enough is enough; cut yourself some slack.