$30 off During Our Annual Pro Sale. View Details »

Creating maintainable CSS

Creating maintainable CSS

A high-level overview of how the approaches taken with OOCSS, SMACSS and BEM can help your CSS remain maintainable and reusable for longer.

From a talk given at the Cape Town Front End Developer meetup March 2013

Rich Archer

March 15, 2013
Tweet

Other Decks in Technology

Transcript

  1. ... The Excruciating Kitchen Sink Analogy
    ... OOCSS, SMACSS, and BEM
    ... “Allow markup to change”
    ... “Keep your selectors short”
    ... “Don’t sweat the class names”
    ... “Be pragmatic”
    ... “Extend your modules”
    ... “Layout modules”
    ... Style Guides
    ... Homework/Beer
    Creating maintainable CSS

    View Slide

  2. Rich Archer
    ...@slocombe
    [email protected]

    View Slide

  3. Creating a new site is sexy

    View Slide

  4. Maintaining a site is painful

    View Slide

  5. View Slide

  6. • SMACSS smacss.com
    • OOCSS oocss.org
    • BEM bem.info
    A better way to structure our styles?

    View Slide

  7. Whatever; CSS is easy!
    ...no namespaces
    ...no macros
    ...no mixins
    ...no functions
    ...no variables

    View Slide

  8. CSS makes it easy for us to be stupid

    View Slide

  9. CSS makes it easy for us to be stupid
    #content.box {
    ...
    }
    #wrapper #content.box {
    ...
    }
    #i-mean-it-this-time #wrapper #content.box {
    ...
    }

    View Slide

  10. • LESS lesscss.org
    • SASS/SCSS sass-lang.com
    • Stylus learnboost.github.com/stylus
    But we have preprocessors!

    View Slide

  11. But we have preprocessors!
    #i-mean-it-this-time {
    #wrapper {
    #content.box {
    ...
    }
    }
    }

    View Slide

  12. • SMACSS smacss.com
    • OOCSS oocss.org
    • BEM bem.info
    Seeking to address di!erent problems

    View Slide

  13. “Separate Content from Presentation”
    The One Rule

    View Slide

  14. Sites are always adapting
    Allow for markup to change

    View Slide

  15. http://vimeo.com/29088090
    37 Signals

    View Slide

  16. View Slide

  17. Keep your selectors short

    View Slide

  18. html #content #wrapper
    article.main-article:nth-child(2)
    div.panel {
    ...
    }

    View Slide

  19. p.panel,
    div.panel {
    ...
    }
    .panel {
    ...
    }

    View Slide

  20. Keep your selectors short
    ...easier debugging
    ...easier point of entry
    ...avoid speci!city issues
    ...CSS evaluates right-to-left
    ...performance?

    View Slide

  21. Headings
    Headings
    Headings
    Headings
    Headings
    Examples!

    View Slide

  22. h1
    a
    h2
    h2
    h2
    h4
    h3
    h4

    View Slide

  23. h1 { font-size: 36px; }
    h2 { font-size: 24px; }
    #sidebar li a,
    h3 { font-size: 18px; }

    View Slide

  24. .heading-headline { font-size: 36px; }
    .heading-subheadline { font-size: 24px; }
    .heading-byline { font-size: 18px; }
    Modules

    View Slide

  25. .heading-headline { font-size: 36px; }
    .heading-subheadline { font-size: 24px; }
    .heading-byline { font-size: 18px; }
    .theme-summer { color: gold; }
    .theme-autumn { color: burlywood; }
    .theme-winter { color: blue; }
    Combinations of modules

    View Slide

  26. (Google doesn’t care)
    Don’t sweat the class names

    View Slide

  27. .heading-headline { font-size: 36px; }
    .heading-subheadline { font-size: 24px; }
    .heading-byline { font-size: 18px; }

    View Slide

  28. .h-headline { font-size: 36px; }
    .h-subheadline { font-size: 24px; }
    .h-byline { font-size: 18px; }

    View Slide

  29. .bob--hugetext { font-size: 36px; }
    .bob--middletext{ font-size: 24px; }
    .bob--teenytext{ font-size: 18px; }

    View Slide



  30. ...

    ul li {}
    ...
    .search-result-item {}

    View Slide


  31. ...
    ...
    ...
    ...
    ...

    View Slide


  32. ...

    View Slide


  33. ...
    ...
    ...
    ...

    View Slide

  34. .fancy-link {
    height: 20px;
    background: red;
    }
    button.fancy-link {
    padding: 0;
    border: 0;
    }
    Be pragmatic

    View Slide

  35. Performance boost?
    ...reuse of code
    ...smaller CSS !les
    ...faster download
    ...less to parse
    ...combine modules for free varieties

    View Slide

  36. View Slide

  37. View Slide


  38. Title
    ...

    .messagebox { border: 1px solid green; }
    .messagebox h2 { color: red; }

    View Slide


  39. Title

    Another title
    ...


    .messagebox { border: 1px solid green; }
    .messagebox h2 { color: red; }

    View Slide


  40. Title

    Another title
    ...


    .messagebox { border: 1px solid green; }
    .messagebox-header { color: red; }

    View Slide

  41. Extend your modules

    View Slide


  42. .messagebox {
    border: 1px solid black;
    color: white;
    background: green;
    }

    View Slide

  43. .messagebox {
    border: 1px solid black;
    color: white;
    background: green;
    }
    .mildalert {
    border: 1px solid black;
    color: white;
    background: orange;
    }
    .badalert {
    border: 1px solid black;
    color: white;
    background: red;
    }

    View Slide




  44. .messagebox {
    border: 3px solid black;
    color: white;
    background: green;
    }
    .messagebox-mild {
    background: orange;
    }
    .messagebox-bad {
    background: red;
    }

    View Slide

  45. Easier organisation
    ...Easier to !nd relevant code
    ...Less “where should this rule go?”
    ...More predictable
    ...More maintainable
    ...Easier debugging
    ...Faster development

    View Slide

  46. Layout modules

    View Slide

  47. Layout
    Handles positioning only.
    Twitter Bootstrap sca!olding, OOCSS, 960gs

    View Slide

  48. .btn
    .btn
    .content
    .subcontent
    .footer
    .btn

    View Slide

  49. .btn .span3
    .btn .span3
    .content .span8 .subcontent .span4
    .footer
    .btn
    .row .span6

    View Slide

  50. Layout
    Handles positioning only.
    Twitter Bootstrap sca!olding, OOCSS, 960gs

    View Slide

  51. Module
    Layout
    Handles positioning only.
    Twitter Bootstrap sca!olding, OOCSS, 960gs
    .button, .messageBox, .search-item

    View Slide

  52. Module
    Layout
    Handles positioning only.
    Twitter Bootstrap sca!olding, OOCSS, 960gs
    Base
    Browser resets, basic typography, element styles
    .button, .messageBox, .search-item

    View Slide

  53. Style guides

    View Slide

  54. View Slide

  55. View Slide

  56. Site-speci"c style guides
    ...a CSS component example page
    ...uses live CSS
    ...acts as crib sheets for newbies
    ...single page to check for modi!cations

    View Slide

  57. Useful links
    Rich Archer
    @slocombe
    [email protected]
    • SMACSS smacss.com
    • OOCSS oocss.org
    • BEM bem.info
    • Twitter Bootstrap getbootstrap.com
    • Jonathan Snook @snookca
    • Nicolle Sullivan @stubbornella

    View Slide