Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Andy Hume

March 10, 2012
Tweet

More Decks by Andy Hume

Other Decks in Technology

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