Breaking Good Habits

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

Transcript

1. View Slide

2. Breaking Good Habits
   Harry Roberts—@csswizardry
   

   View Slide

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

   View Slide

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

   View Slide

5. Web standards…
   •A great idea? Definitely!
   •Well intentioned? You bet!
   •Ambiguous? Sadly :(
   •Open to interpretation? Unfortunately…
   

   View Slide

6. …web standards
   •Rules? Definitely not!
   

   View Slide

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?
   

   View Slide

8. Good habits?
   •Avoiding classes and IDs
   •‘Handcrafting’ our CSS
   •Avoiding extra markup
   

   View Slide

9. Bad habits?
   •Classitis—using too many classes
   •Grid systems
   •Extra markup
   •‘Insemantic’ class names
   

   View Slide

10. We’ve been
    solving the wrong
    problems for the
    wrong people!
    

    View Slide

11. View Slide

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

    View Slide

13. Maintainability
    

    View Slide

14. Flexibility
    

    View Slide

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

    View Slide

16. Be ?#*@ing explicit!
    

    View Slide

17. .intro{ font-size:1.2em; }
    Lorem ipsum dolor sit
    amet...
    

    View Slide

18. Specific !== explicit
    

    View Slide

19. Extensibility
    

    View Slide

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

    View Slide

21. Predictability
    

    View Slide

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

    View Slide

23. View Slide

24. CSS selectors
    

    View Slide

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

    View Slide

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.
    

    View Slide

27. Classes
    •No one uses classes except browsers
    and other developers (and
    microformats).
    •Classes are neither semantic or
    insemantic; they’re sensible or
    insensible.
    

    View Slide

28. View Slide

29. .red
    .red{
    color:red;
    }
    I am a designer
    and developer
    

    View Slide

30. .red
    .red{
    color:blue; /* WTF */
    }
    I am a designer
    and developer
    

    View Slide

31. .brand
    .brand{
    color:#BADA55; /* FTW */
    }
    I am a designer
    and developer
    

    View Slide

32. View Slide

33. Objects and
    abstractions
    

    View Slide

34. The media object
    bit.ly/cCY3Ew
    

    View Slide

35. The media object
    bit.ly/cCY3Ew
    

    View Slide

36. The media object
    bit.ly/cCY3Ew
    

    View Slide

37. The media object
    bit.ly/cCY3Ew
    

    View Slide

38. The media object
    bit.ly/cCY3Ew
    
    
    Lorem ipsum...
    
    .media,.body { overflow:hidden; }
    .img { float:left; margin-right:20px; }
    .img img { display:block; }
    

    View Slide

39. The media object
    bit.ly/cCY3Ew
    
    
    
    Lorem ipsum...
    Read more...
    
    
    

    View Slide

40. View Slide

41. Nicole Sullivan
    @stubbornella
    

    View Slide

42. The nav abstraction
    bit.ly/oD2M9n
    

    View Slide

43. .nav{
    list-style:none;
    margin-left:0;
    }
    .nav li{
    display:inline;
    }
    .nav a{
    display:inline-block;
    }
    The nav abstraction
    bit.ly/oD2M9n
    

    View Slide

44. ...
    .breadcrumb li:before{
    content:"» ";
    }
    .breadcrumb li:first-child:before{
    content:"";
    }
    Breadcrumbs…?
    bit.ly/oD2M9n
    

    View Slide

45. The island object
    bit.ly/oqQ7JJ
    

    View Slide

46. The island object
    bit.ly/oqQ7JJ
    ...
    .island{
    padding:1.5em;
    }
    .island > :last-child{
    margin-bottom:0;
    }
    

    View Slide

47. The island object
    bit.ly/oqQ7JJ
    ...
    .island.promo{
    color:#fff;
    background-color:#C0FFEE;
    }
    

    View Slide

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:; }
    

    View Slide

49. Double stranded
    heading hierarchy
    
    Recent tweets
    ...
    
    

    View Slide

50. View Slide

51. Grid systems
    

    View Slide

52. View Slide

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

    View Slide

54. csswizardry.com/fluid-grids
    

    View Slide

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

    View Slide

56. View Slide

57. All together now!
    

    View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. Benefits and side-
    effects
    •Sites are faster to build…
    •…more robust
    •…more maintainable
    •…more consistent
    •…and incidentally more efficient.
    

    View Slide

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
    

    View Slide

70. Now what?
    •Solve problems for the right people.
    •Keep yourselves happy and sane.
    •Learn when enough is enough; cut
    yourself some slack.
    

    View Slide

71. However bad you
    think it is, there’s
    always worse…
    

    View Slide

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

    View Slide