CSS for grown ups: maturing best practises, SXSW 2012

NB: Slides may not make sense without the actual talk.

Transcript

1. GROWNUPS
   Andy Hume
   MATURING BEST PRACTISES
   SXSW interactive, 2012
   CSS FOR
   Saturday, 10 March 2012
   

   View Slide

2. Front-enders shouldn't be a aid to say they
   "program". CSS is cons aint programming
   and not respec ng JS in 2011 is just iggnant
   [sic].
   Alex Russell
   https://twitter.com/slightlylate/status/141681624134844416
   Saturday, 10 March 2012
   

   View Slide

3. BEGINNING
   IN THE
   Saturday, 10 March 2012
   

   View Slide

4. Web Standards movement
   http://www.flickr.com/photos/mariachily/4149054961/
   Saturday, 10 March 2012
   

   View Slide

5. 
   src="spacer.gif">
   size="4" color="red">Error
   font>
   
   
   
   tr>
   
   Saturday, 10 March 2012
   

   View Slide

6. Error
   Saturday, 10 March 2012
   

   View Slide

7. http://www.csszengarden.com
   Separation of concerns
   The power of CSS
   Saturday, 10 March 2012
   

   View Slide

8. Web Standards Obsession
   Saturday, 10 March 2012
   

   View Slide

9. Every me you need to add a class or id for a
   s le hook, put a pound/dollar in a jar.
   #malarkeyspro ps
   Andy Clarke, 2011
   https://twitter.com/malarkey/status/70161540254416896
   Saturday, 10 March 2012
   

   View Slide

10. .social li:nth-child(1) {
    background-image: url(twitter.png);
    }
    .social li:nth-child(2) {
    background-image: url(facebook.png);
    }
    .social li:nth-child(3) {
    background-image: url(linkedin.png);
    }
    Saturday, 10 March 2012
    

    View Slide

11. .social .twitter {
    background-image: url(twitter.png);
    }
    .social .facebook {
    background-image: url(facebook.png);
    }
    .social .linkedin {
    background-image: url(linkedin.png);
    }
    Saturday, 10 March 2012
    

    View Slide

12. http://www.flickr.com/photos/dippy_duck/2685596185/
    Network Effects
    Managing complexity
    Saturday, 10 March 2012
    

    View Slide

13. http://www.flickr.com/photos/dippy_duck/2685596185/
    Network Effects
    Managing complexity
    .product-list li a {
    }
    Saturday, 10 March 2012
    

    View Slide

14. http://www.flickr.com/photos/dippy_duck/2685596185/
    Network Effects
    Managing complexity
    .product-list li a {
    }
    .product-list li a {
    display: block;
    padding: 0.5em 0.23em;
    color: #54FE87;
    background-color: #CCC;
    text-shadow: #6374AB 20px -12px 2px;
    }
    Saturday, 10 March 2012
    

    View Slide

15. http://www.flickr.com/photos/dippy_duck/2685596185/
    With great power...
    Saturday, 10 March 2012
    

    View Slide

16. http://www.flickr.com/photos/banspy/3843960604/
    Constraints are good
    Saturday, 10 March 2012
    

    View Slide

17. http://www.flickr.com/photos/banspy/3843960604/
    Constraints are good
    Nobody is really smart enough to program
    compu rs.
    Steve McConnell
    Code Complete 2, Microsoft Press, 2004
    Saturday, 10 March 2012
    

    View Slide

18. #side-bar a {
    color: green !important;
    }
    Saturday, 10 March 2012
    

    View Slide

19. http://www.flickr.com/photos/banspy/3843960604/
    Constraints are good
    Nobody is really smart enough to s le web
    pages.
    Andy Hume
    SXSWi, 2012
    Saturday, 10 March 2012
    

    View Slide

20. ‘Code quality’
    CORRECTNESS
    PERFORMANCE
    REUSABILITY
    TESTABILITY
    RELIABILITY
    EXTENSIBILITY
    WEB 2.0 COMPLIANT
    Saturday, 10 March 2012
    

    View Slide

21. http://www.flickr.com/photos/anandham/4499539060/
    Optimize for change
    Saturday, 10 March 2012
    

    View Slide

22. 261 declarations of Facebook
    blue
    http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us
    261 declarations of Facebook blue
    Saturday, 10 March 2012
    

    View Slide

23. Very few people (only professional designers, it
    seems) wri s le sheets longer than a
    hundred lines.
    Bert Bos, 2008
    http://www.w3.org/People/Bos/CSS-variables
    Saturday, 10 March 2012
    

    View Slide

24. Sass
    http://sass-lang.com
    LESS
    http://lesscss.org/
    Stylus
    http://learnboost.github.com/stylus/
    Saturday, 10 March 2012
    

    View Slide

25. OOCSS
    http://oocss.org
    SMACSS
    http://smacss.com
    CSS Lint
    http://csslint.net
    Saturday, 10 March 2012
    

    View Slide

26. EXAMPLES
    Saturday, 10 March 2012
    

    View Slide

27. Layers of CSS
    HTML DOCUMENT
    DOCUMENT
    Saturday, 10 March 2012
    

    View Slide

28. Layers of CSS
    BASE STYLES
    HTML DOCUMENT
    DOCUMENT BASE
    Saturday, 10 March 2012
    

    View Slide

29. Layers of CSS
    BASE STYLES
    MODULE STYLES
    HTML DOCUMENT
    DOCUMENT BASE MODULE
    Saturday, 10 March 2012
    

    View Slide

30. Layers of CSS
    BASE STYLES
    LAYOUT STYLES
    MODULE STYLES
    HTML DOCUMENT
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

31. .green {
    color: green;
    }
    Saturday, 10 March 2012
    

    View Slide

32. .green {
    color: red;
    }
    Saturday, 10 March 2012
    

    View Slide

33. .promo-box {
    color: red;
    background: black;
    }
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

34. .promo-box {
    color: red;
    background: black;
    }
    .promo-box h3 {
    font-size: 1.2em;
    text-transform: uppercase;
    }
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

35. .promo-box {
    color: red;
    background: black;
    }
    .promo-box h3,
    .promo-box h4 {
    font-size: 1.2em;
    text-transform: uppercase;
    }
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

36. .promo-box {
    color: red;
    background: black;
    }
    .promo-box .promo-box-h {
    font-size: 1.2em;
    text-transform: uppercase;
    }
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

37. !! headings
    Saturday, 10 March 2012
    

    View Slide

38. h1 { font-size: 3em; }
    h2 { font-size: 2.3em; }
    h3 { font-size: 2.1em; }
    h4 { font-size: 1.8em; }
    h5 { font-size: 1.3em; }
    h6 { font-size: 1.1em; }
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

39. .h1 { font-size: 3em; }
    .h2 { font-size: 2.3em; }
    .h3 { font-size: 2.1em; }
    .h4 { font-size: 1.8em; }
    .h5 { font-size: 1.3em; }
    .h6 { font-size: 1.1em; }
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

40. .h-headline { font-size: 3em; }
    .h-subheadline { font-size: 2.3em; }
    .h-byline { font-size: 2.1em; }
    .h-standfirst { font-size: 1.8em; }
    .h-related { font-size: 1.3em; }
    .h-promo { font-size: 1.1em; }
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

41. !! lists
    Saturday, 10 March 2012
    

    View Slide

42. ul.product-list li {
    }
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

43. .product-list li {
    }
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

44. .product-item {
    }
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

45. 
    Prod 1
    Prod 2
    Prod 3
    Prod 4
    Prod 5
    
    Saturday, 10 March 2012
    

    View Slide

46. Prod 1
    ...
    
    Prod 1
    Details about product
    
    ...
    
    Prod 1
    Details about product
    
    Saturday, 10 March 2012
    

    View Slide

47. .product-list li,
    .product-item {
    }
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

48. !! module variants
    Saturday, 10 March 2012
    

    View Slide

49. .promo-box {
    color: red;
    background: black;
    }
    #sidebar .promo-box {
    background: white;
    }
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

50. .promo-box {
    color: red;
    background: black;
    }
    .promo-box-light {
    background: white;
    }
    
    div>
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

51. .promo-box {
    color: red;
    background: black;
    }
    .promo-box--light {
    background: white;
    }
    
    div>
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

52. !! page specific styles
    Saturday, 10 March 2012
    

    View Slide

53. .promo-box {
    color: red;
    background: black;
    }
    .product-page .promo-box {
    color: green;
    }
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

54. .promo-box {
    color: red;
    background: black;
    }
    .product-page .promo-box,
    .home-page .promo-box,
    .about-page .promo-box,
    .tag-page .promo-box {
    color: green;
    }
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

55. .promo-box {
    color: red;
    background: black;
    }
    .promo-box .promo-box-eco {
    color: green;
    }
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

56. !! media queries
    Saturday, 10 March 2012
    

    View Slide

57. .promo-box input[type=text] {
    display: block;
    }
    @media screen and (min-width: 20em) {
    .promo-box input[type=text] {
    display: inline;
    }
    }
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

58. https://fontdeck.com/register
    Fontdeck forms
    Saturday, 10 March 2012
    

    View Slide

59. .promo-box input[type=text] {
    display: block;
    }
    .promo-box @(min-width: 20em) {
    input[type=text] {
    display: inline;
    }
    }
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

60. .promo-box input[type=text] {
    display: block;
    }
    .promo-box @(min-width: 20em) {
    input[type=text] {
    display: inline;
    }
    }
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

61. .promo-box input[type=text] {
    display: inline;
    }
    .promo-box.narrow input[type=text] {
    display: block;
    }
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

62. .promo-box input[type=text] {
    display: inline;
    }
    .promo-box.narrow input[type=text] {
    display: block;
    }
    DOCUMENT BASE MODULE LAYOUT
    Saturday, 10 March 2012
    

    View Slide

63. Selector Queries
    https://github.com/ahume/selector-queries
    
    Content here
    
    Saturday, 10 March 2012
    

    View Slide

64. Selector Queries
    https://github.com/ahume/selector-queries
    
    Content here
    
    Saturday, 10 March 2012
    

    View Slide

65. Selector Queries
    https://github.com/ahume/selector-queries
    
    Content here
    
    Saturday, 10 March 2012
    

    View Slide

66. Selector Queries
    https://github.com/ahume/selector-queries
    
    Content here
    
    Saturday, 10 March 2012
    

    View Slide

67. Selector Queries
    https://github.com/ahume/selector-queries
    var e = document.querySelectorAll(".promo-box");
    SelectorQueries.add(e, "min-width",
    "30em", "wide");
    Saturday, 10 March 2012
    

    View Slide

68. !! presentational class names
    Saturday, 10 March 2012
    

    View Slide

69. Surgical layout helpers
    .margin-top {
    margin-top: 8px;
    }
    .margin-bottom {
    margin-bottom: 8px;
    }
    Saturday, 10 March 2012
    

    View Slide

70. 
    Module content
    
    Surgical layout helpers
    Saturday, 10 March 2012
    

    View Slide

71. .gutter-left {
    padding-left: 8px;
    }
    .gutter-right {
    padding-right: 8px;
    }
    Surgical layout helpers
    Saturday, 10 March 2012
    

    View Slide

72. 
    
    Module content
    
    
    Surgical layout helpers
    Saturday, 10 March 2012
    

    View Slide

73. !! extra non-semantic elements
    Saturday, 10 March 2012
    

    View Slide

74. Background icons
    23 Comments
    p>
    .icon {
    background-image: url(icons.png);
    }
    .icon-comment {
    background-position: 0 -30px;
    }
    Saturday, 10 March 2012
    

    View Slide

75. Background icons
    23
    Comments
    .icon {
    background-image: url(icons.png);
    }
    .icon-comment {
    background-position: 0 -30px;
    }
    Saturday, 10 March 2012
    

    View Slide

76. 23
    Comments
    
    i>Comment
    Saturday, 10 March 2012
    

    View Slide

77. STYLEGUIDES
    DOCS
    Saturday, 10 March 2012
    

    View Slide

78. BBC Global Experience Language
    http://www.bbc.co.uk/gel
    Saturday, 10 March 2012
    

    View Slide

79. http://twitter.github.com/bootstrap/
    Documenting base styles
    Saturday, 10 March 2012
    

    View Slide

80. Documenting base styles
    http://paulrobertlloyd.com/about/styleguide/
    Saturday, 10 March 2012
    

    View Slide

81. Documenting base styles
    http://paulrobertlloyd.com/about/styleguide/
    Saturday, 10 March 2012
    

    View Slide

82. Documenting layout styles
    Saturday, 10 March 2012
    

    View Slide

83. http://www.flickr.com/photos/banspy/3843960604/
    Module library
    Saturday, 10 March 2012
    

    View Slide

84. http://www.flickr.com/photos/banspy/3843960604/
    Module library
    Saturday, 10 March 2012
    

    View Slide

85. The benefits
    Saturday, 10 March 2012
    

    View Slide

86. Client-side developers
    http://goo.gl/xq76e
    Software developers
    http://goo.gl/Fj9DP
    Saturday, 10 March 2012
    

    View Slide

87. Thank-you!
    http://lanyrd.com/spmqc
    @andyhume
    Creative Commons Licensed
    Attribution, Non-Commercial, Share Alike
    cc
    Saturday, 10 March 2012
    

    View Slide