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
... 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/BeerCreating maintainable CSS
View Slide
Rich Archer...@slocombe[email protected]
Creating a new site is sexy
Maintaining a site is painful
• SMACSS smacss.com• OOCSS oocss.org• BEM bem.infoA better way to structure our styles?
Whatever; CSS is easy!...no namespaces...no macros...no mixins...no functions...no variables
CSS makes it easy for us to be stupid
CSS makes it easy for us to be stupid#content.box {...}#wrapper #content.box {...}#i-mean-it-this-time #wrapper #content.box {...}
• LESS lesscss.org• SASS/SCSS sass-lang.com• Stylus learnboost.github.com/stylusBut we have preprocessors!
But we have preprocessors!#i-mean-it-this-time {#wrapper {#content.box {...}}}
• SMACSS smacss.com• OOCSS oocss.org• BEM bem.infoSeeking to address di!erent problems
“Separate Content from Presentation”The One Rule
Sites are always adaptingAllow for markup to change
http://vimeo.com/2908809037 Signals
Keep your selectors short
html #content #wrapperarticle.main-article:nth-child(2)div.panel {...}
p.panel,div.panel {...}.panel {...}
Keep your selectors short...easier debugging...easier point of entry...avoid speci!city issues...CSS evaluates right-to-left...performance?
HeadingsHeadingsHeadingsHeadingsHeadingsExamples!
h1ah2h2h2h4h3h4
h1 { font-size: 36px; }h2 { font-size: 24px; }#sidebar li a,h3 { font-size: 18px; }
.heading-headline { font-size: 36px; }.heading-subheadline { font-size: 24px; }.heading-byline { font-size: 18px; }Modules
.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
(Google doesn’t care)Don’t sweat the class names
.heading-headline { font-size: 36px; }.heading-subheadline { font-size: 24px; }.heading-byline { font-size: 18px; }
.h-headline { font-size: 36px; }.h-subheadline { font-size: 24px; }.h-byline { font-size: 18px; }
.bob--hugetext { font-size: 36px; }.bob--middletext{ font-size: 24px; }.bob--teenytext{ font-size: 18px; }
...ul li {}....search-result-item {}
...............
...
............
.fancy-link {height: 20px;background: red;}button.fancy-link {padding: 0;border: 0;}Be pragmatic
Performance boost?...reuse of code...smaller CSS !les...faster download...less to parse...combine modules for free varieties
Title....messagebox { border: 1px solid green; }.messagebox h2 { color: red; }
TitleAnother title....messagebox { border: 1px solid green; }.messagebox h2 { color: red; }
TitleAnother title....messagebox { border: 1px solid green; }.messagebox-header { color: red; }
Extend your modules
.messagebox {border: 1px solid black;color: white;background: green;}
.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;}
.messagebox {border: 3px solid black;color: white;background: green;}.messagebox-mild {background: orange;}.messagebox-bad {background: red;}
Easier organisation...Easier to !nd relevant code...Less “where should this rule go?”...More predictable...More maintainable...Easier debugging...Faster development
Layout modules
LayoutHandles positioning only.Twitter Bootstrap sca!olding, OOCSS, 960gs
.btn.btn.content.subcontent.footer.btn
.btn .span3.btn .span3.content .span8 .subcontent .span4.footer.btn.row .span6
ModuleLayoutHandles positioning only.Twitter Bootstrap sca!olding, OOCSS, 960gs.button, .messageBox, .search-item
ModuleLayoutHandles positioning only.Twitter Bootstrap sca!olding, OOCSS, 960gsBaseBrowser resets, basic typography, element styles.button, .messageBox, .search-item
Style guides
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
Useful linksRich Archer@slocombe[email protected]• SMACSS smacss.com• OOCSS oocss.org• BEM bem.info• Twitter Bootstrap getbootstrap.com• Jonathan Snook @snookca• Nicolle Sullivan @stubbornella