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

080ddd983c6bbfdfa3b903eba000d0c2?s=128

Rich Archer

March 15, 2013
Tweet

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
  2. Rich Archer ...@slocombe ...rich.archer@ubxd.com

  3. Creating a new site is sexy

  4. Maintaining a site is painful

  5. None
  6. • SMACSS smacss.com • OOCSS oocss.org • BEM bem.info A

    better way to structure our styles?
  7. Whatever; CSS is easy! ...no namespaces ...no macros ...no mixins

    ...no functions ...no variables
  8. CSS makes it easy for us to be stupid

  9. CSS makes it easy for us to be stupid #content.box

    { ... } #wrapper #content.box { ... } #i-mean-it-this-time #wrapper #content.box { ... }
  10. • LESS lesscss.org • SASS/SCSS sass-lang.com • Stylus learnboost.github.com/stylus But

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

    ... } } }
  12. • SMACSS smacss.com • OOCSS oocss.org • BEM bem.info Seeking

    to address di!erent problems
  13. “Separate Content from Presentation” The One Rule

  14. Sites are always adapting Allow for markup to change

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

  16. None
  17. Keep your selectors short

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

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

  20. Keep your selectors short ...easier debugging ...easier point of entry

    ...avoid speci!city issues ...CSS evaluates right-to-left ...performance?
  21. Headings Headings Headings Headings Headings Examples!

  22. h1 a h2 h2 h2 h4 h3 h4

  23. h1 { font-size: 36px; } h2 { font-size: 24px; }

    #sidebar li a, h3 { font-size: 18px; }
  24. .heading-headline { font-size: 36px; } .heading-subheadline { font-size: 24px; }

    .heading-byline { font-size: 18px; } Modules
  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
  26. (Google doesn’t care) Don’t sweat the class names

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

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

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

    font-size: 18px; }
  30. <ul> <li class="search-result-item"></li> ... </ul> ul li {} ... .search-result-item

    {}
  31. <ul> <li>...</li> <li class="search-result-item">...</li> <li>...</li> <li>...</li> <li class="search-result-item">...</li> </ul>

  32. <fieldset class="search-result-item"> ... </fieldset>

  33. <div> <div class="search-result-item">...</div> <div>...</div> <div class="search-result-item">...</div> <div>...</div> </div>

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

    0; border: 0; } Be pragmatic
  35. Performance boost? ...reuse of code ...smaller CSS !les ...faster download

    ...less to parse ...combine modules for free varieties
  36. None
  37. None
  38. <div class="messagebox"> <h2>Title</h2> <article>...</article> </div> .messagebox { border: 1px solid

    green; } .messagebox h2 { color: red; }
  39. <div class="messagebox"> <h2>Title</h2> <article> <h2>Another title</h2> ... </article> </div> .messagebox

    { border: 1px solid green; } .messagebox h2 { color: red; }
  40. <div class="messagebox"> <h2 class="messagebox-header">Title</h2> <article> <h2>Another title</h2> ... </article> </div>

    .messagebox { border: 1px solid green; } .messagebox-header { color: red; }
  41. Extend your modules

  42. <div class="messagebox"></div> .messagebox { border: 1px solid black; color: white;

    background: green; }
  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; }
  44. <div class="messagebox"></div> <div class="messagebox messagebox-mild"></div> <div class="messagebox messagebox-bad"></div> .messagebox {

    border: 3px solid black; color: white; background: green; } .messagebox-mild { background: orange; } .messagebox-bad { background: red; }
  45. Easier organisation ...Easier to !nd relevant code ...Less “where should

    this rule go?” ...More predictable ...More maintainable ...Easier debugging ...Faster development
  46. Layout modules

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

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

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

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

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

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

    Base Browser resets, basic typography, element styles .button, .messageBox, .search-item
  53. Style guides

  54. None
  55. None
  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
  57. Useful links Rich Archer @slocombe rich.archer@ubxd.com • SMACSS smacss.com •

    OOCSS oocss.org • BEM bem.info • Twitter Bootstrap getbootstrap.com • Jonathan Snook @snookca • Nicolle Sullivan @stubbornella