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

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
   ...rich.archer@ubxd.com
   

   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
    rich.archer@ubxd.com
    • SMACSS smacss.com
    • OOCSS oocss.org
    • BEM bem.info
    • Twitter Bootstrap getbootstrap.com
    • Jonathan Snook @snookca
    • Nicolle Sullivan @stubbornella
    

    View Slide