$30 off During Our Annual Pro Sale. View Details »

Breaking Good Habits

Harry Roberts
February 12, 2012

Breaking Good Habits

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

Harry Roberts

February 12, 2012

More Decks by Harry Roberts

Other Decks in Design


  1. None
  2. Breaking Good Habits Harry Roberts—@csswizardry

  3. Harry who?! •Web designer/developer •Senior UI Developer—BSkyB •@csswizardry •csswizardry.com

  4. Necessary explanation of the cheesy, overly- cryptic talk title.

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

    •Ambiguous? Sadly :( •Open to interpretation? Unfortunately…
  6. …web standards •Rules? Definitely not!

  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?
  8. Good habits? •Avoiding classes and IDs •‘Handcrafting’ our CSS •Avoiding

    extra markup
  9. Bad habits? •Classitis—using too many classes •Grid systems •Extra markup

    •‘Insemantic’ class names
  10. We’ve been solving the wrong problems for the wrong people!

  11. None
  12. The 4 ‘-ility’s •Maintainability •Flexibility •Extensibility •Predictability

  13. Maintainability

  14. Flexibility

  15. body > div:nth-of-type(2) > article:first- child > p:first-child{ font-size:1.2em }

    <p>Lorem ipsum dolor sit amet...</p>
  16. Be ?#*@ing explicit!

  17. .intro{ font-size:1.2em; } <p class=intro>Lorem ipsum dolor sit amet...</p>

  18. Specific !== explicit

  19. Extensibility

  20. Extensible •Stop thinking in pages… •…think in components… •…then think

    in abstractions.
  21. Predictability

  22. Expect the unexpected Always build like your client’s CMS is

    a bulldozer…
  23. None
  24. CSS selectors

  25. IDs •Don’t use IDs in CSS •Ever.

  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.
  27. Classes •No one uses classes except browsers and other developers

    (and microformats). •Classes are neither semantic or insemantic; they’re sensible or insensible.
  28. None
  29. .red .red{ color:red; } <h1>I am a <span class=red>designer</span> and

    <span class=red>developer</span></h1>
  30. .red .red{ color:blue; /* WTF */ } <h1>I am a

    <span class=red>designer</span> and <span class=red>developer</span></h1>
  31. .brand .brand{ color:#BADA55; /* FTW */ } <h1>I am a

    <span class=brand>designer</span> and <span class=brand>developer</span></h1>
  32. None
  33. Objects and abstractions

  34. The media object bit.ly/cCY3Ew

  35. The media object bit.ly/cCY3Ew

  36. The media object bit.ly/cCY3Ew

  37. The media object bit.ly/cCY3Ew

  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; }
  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>
  40. None
  41. Nicole Sullivan @stubbornella

  42. The nav abstraction bit.ly/oD2M9n

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

    display:inline-block; } The nav abstraction bit.ly/oD2M9n
  44. <ol class="nav breadcrumb">...</ol> .breadcrumb li:before{ content:"» "; } .breadcrumb li:first-child:before{

    content:""; } Breadcrumbs…? bit.ly/oD2M9n
  45. The island object bit.ly/oqQ7JJ

  46. The island object bit.ly/oqQ7JJ <div class=island>...</div> .island{ padding:1.5em; } .island

    > :last-child{ margin-bottom:0; }
  47. The island object bit.ly/oqQ7JJ <div class="island promo">...</div> .island.promo{ color:#fff; background-color:#C0FFEE;

  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:; }
  49. Double stranded heading hierarchy <div class=twitter> <h3 class=delta>Recent tweets</h3> ...

  50. None
  51. Grid systems

  52. None
  53. Abstract layout into its own layer Keep components free of

  54. csswizardry.com/fluid-grids

  55. Straighten up! @media(max-width:480px){ .grid{ float:none; clear:both; width:auto; margin:0; } }

  56. None
  57. All together now!

  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. Benefits and side- effects •Sites are faster to build… •…more

    robust •…more maintainable •…more consistent •…and incidentally more efficient.
  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
  70. Now what? •Solve problems for the right people. •Keep yourselves

    happy and sane. •Learn when enough is enough; cut yourself some slack.
  71. However bad you think it is, there’s always worse…

  72. Breaking Good Habits •Harry Roberts – @csswizardry •csswizardry.com •Nicole Sullivan

    – @stubbornella