Breaking Good Habits

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

Video: https://vimeo.com/44773888

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. faavorite.com
   

   View Slide

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

   View Slide

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

   View Slide

7. …web standards
   •Rules? Definitely not!
   

   View Slide

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?
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. View Slide

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

    View Slide

14. Maintainability
    

    View Slide

15. Flexibility
    

    View Slide

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

    View Slide

17. Be ?#*@ing explicit!
    

    View Slide

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

    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. .red
    .red{
    color:red;
    }
    I am a designer
    and developer
    

    View Slide

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

    View Slide

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

    View Slide

31. View Slide

32. Objects and
    abstractions
    

    View Slide

33. The media object
    bit.ly/cCY3Ew
    

    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
    
    
    Lorem ipsum...
    
    .media,.body { overflow:hidden; }
    .img { float:left; margin-right:20px; }
    .img img { display:block; }
    

    View Slide

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

    View Slide

39. View Slide

40. Nicole Sullivan
    @stubbornella
    

    View Slide

41. The nav abstraction
    bit.ly/oD2M9n
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

45. View Slide

46. Grid systems
    

    View Slide

47. View Slide

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

    View Slide

49. csswizardry.com/fluid-grids
    

    View Slide

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

    View Slide

51. View Slide

52. All together now!
    

    View Slide

53. View Slide

54. View Slide

55. View Slide

56. View Slide

57. View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

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

    View Slide

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

    View Slide

65. Breaking Good Habits
    •Harry Roberts – @csswizardry
    •csswizardry.com
    •faavr.it/csswizardry
    •Nicole Sullivan – @stubbornella
    

    View Slide