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

Breaking Good Habits

Harry Roberts
April 28, 2012

Breaking Good Habits

Slides from my first conference talk at Front-Trends (Warsaw, Poland) 26 April, 2012.

Video: https://vimeo.com/44773888

Harry Roberts

April 28, 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. faavorite.com

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

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

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

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

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

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

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

  14. Maintainability

  15. Flexibility

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

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

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

  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. .red .red{ color:red; } <h1>I am a <span class=red>designer</span> and

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

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

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

  33. The media object bit.ly/cCY3Ew

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

  41. The nav abstraction bit.ly/oD2M9n

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

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

    content:""; } Breadcrumbs…? bit.ly/oD2M9n
  44. 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:; } bit.ly/yyReiE
  45. None
  46. Grid systems

  47. None
  48. Abstract layout into its own layer Keep components free of

  49. csswizardry.com/fluid-grids

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

  51. None
  52. All together now!

  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. Benefits and side-effects •Sites are faster to build… •…more robust

    •…more maintainable •…more consistent •…and incidentally more efficient.
  64. Now what? •Solve problems for the right people. •Keep yourselves

    happy and sane. •Learn when enough is enough; cut yourself some slack.
  65. Breaking Good Habits •Harry Roberts – @csswizardry •csswizardry.com •faavr.it/csswizardry •Nicole

    Sullivan – @stubbornella