CSS for grown ups: maturing best practises, SXSW 2012

CSS for grown ups: maturing best practises, SXSW 2012

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

Ded01cdab114abe4ec13511e4c25b9bb?s=128

Andy Hume

March 10, 2012
Tweet

Transcript

  1. GROWNUPS Andy Hume MATURING BEST PRACTISES SXSW interactive, 2012 CSS

    FOR Saturday, 10 March 2012
  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
  3. BEGINNING IN THE Saturday, 10 March 2012

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

  5. <table> <tr><td><img src="spacer.gif"><img src="spacer.gif"></td></tr> <tr><td><font face="arial,sans-serif" size="4" color="red"><b>Error</ font><br><br></b></td></tr> <tr><td><img

    src="spacer.gif"></td></ tr> </table> Saturday, 10 March 2012
  6. <p class="error">Error</p> Saturday, 10 March 2012

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

    March 2012
  8. Web Standards Obsession Saturday, 10 March 2012

  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
  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
  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
  12. http://www.flickr.com/photos/dippy_duck/2685596185/ Network Effects Managing complexity Saturday, 10 March 2012

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

    Saturday, 10 March 2012
  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
  15. http://www.flickr.com/photos/dippy_duck/2685596185/ With great power... Saturday, 10 March 2012

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

  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
  18. #side-bar a { color: green !important; } Saturday, 10 March

    2012
  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
  20. ‘Code quality’ CORRECTNESS PERFORMANCE REUSABILITY TESTABILITY RELIABILITY EXTENSIBILITY WEB 2.0

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

  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
  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
  24. Sass http://sass-lang.com LESS http://lesscss.org/ Stylus http://learnboost.github.com/stylus/ Saturday, 10 March 2012

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

    2012
  26. EXAMPLES Saturday, 10 March 2012

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

  28. Layers of CSS BASE STYLES HTML DOCUMENT DOCUMENT BASE Saturday,

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

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

    DOCUMENT DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
  31. .green { color: green; } Saturday, 10 March 2012

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

  33. .promo-box { color: red; background: black; } DOCUMENT BASE MODULE

    LAYOUT Saturday, 10 March 2012
  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
  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
  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
  37. !! headings Saturday, 10 March 2012

  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
  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
  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
  41. !! lists Saturday, 10 March 2012

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

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

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

    2012
  45. <ul> <li class="product-item">Prod 1</li> <li class="product-item">Prod 2</li> <li class="product-item">Prod 3</li>

    <li class="product-item">Prod 4</li> <li class="product-item">Prod 5</li> </ul> Saturday, 10 March 2012
  46. <p class="product-item">Prod 1</p> ... <div class="product-item"> <h4 class="product-item-h">Prod 1</h4> <p>Details

    about product</p> </div> ... <section class="product-item"> <h2 class="product-item-h">Prod 1</h2> <p>Details about product</p> </section> Saturday, 10 March 2012
  47. .product-list li, .product-item { } DOCUMENT BASE MODULE LAYOUT Saturday,

    10 March 2012
  48. !! module variants Saturday, 10 March 2012

  49. .promo-box { color: red; background: black; } #sidebar .promo-box {

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

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

    white; } <div class="promo-box promo-box--light"></ div> DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
  52. !! page specific styles Saturday, 10 March 2012

  53. .promo-box { color: red; background: black; } .product-page .promo-box {

    color: green; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
  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
  55. .promo-box { color: red; background: black; } .promo-box .promo-box-eco {

    color: green; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
  56. !! media queries Saturday, 10 March 2012

  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
  58. https://fontdeck.com/register Fontdeck forms Saturday, 10 March 2012

  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
  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
  61. .promo-box input[type=text] { display: inline; } .promo-box.narrow input[type=text] { display:

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

    block; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012
  63. Selector Queries https://github.com/ahume/selector-queries <div data-squery="max-width:400px=narrow"> <p>Content here</p> </div> Saturday, 10

    March 2012
  64. Selector Queries https://github.com/ahume/selector-queries <div data-squery="max-width:400px=narrow"> <p>Content here</p> </div> Saturday, 10

    March 2012
  65. Selector Queries https://github.com/ahume/selector-queries <div data-squery="max-width:400px=narrow"> <p>Content here</p> </div> Saturday, 10

    March 2012
  66. Selector Queries https://github.com/ahume/selector-queries <div data-squery="max-width:400px=narrow"> <p>Content here</p> </div> Saturday, 10

    March 2012
  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
  68. !! presentational class names Saturday, 10 March 2012

  69. Surgical layout helpers .margin-top { margin-top: 8px; } .margin-bottom {

    margin-bottom: 8px; } Saturday, 10 March 2012
  70. <div class="promo-box margin-top"> Module content </div> Surgical layout helpers Saturday,

    10 March 2012
  71. .gutter-left { padding-left: 8px; } .gutter-right { padding-right: 8px; }

    Surgical layout helpers Saturday, 10 March 2012
  72. <div class="gutter-left gutter-right"> <div class="promo-box"> Module content </div> </div> Surgical

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

  74. Background icons <p class="icon icon-comment">23 Comments</ p> .icon { background-image:

    url(icons.png); } .icon-comment { background-position: 0 -30px; } Saturday, 10 March 2012
  75. Background icons <p><i class="icon icon-comment"></i>23 Comments</p> .icon { background-image: url(icons.png);

    } .icon-comment { background-position: 0 -30px; } Saturday, 10 March 2012
  76. <p><i class="icon icon-comment"></i>23 Comments</p> <a><i class="icon icon-comment"></ i>Comment</a> Saturday, 10

    March 2012
  77. STYLEGUIDES DOCS Saturday, 10 March 2012

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

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

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

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

  82. Documenting layout styles Saturday, 10 March 2012

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

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

  85. The benefits Saturday, 10 March 2012

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

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

    cc Saturday, 10 March 2012