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
2. Rich Archer ...@slocombe ...rich.archer@ubxd.com
3. Creating a new site is sexy
4. Maintaining a site is painful
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
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
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
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