CSS Methodologies

Object Oriented CSS (OOCSS)


Nicole Sullivan (@stubbornella)

Purpose: encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add to and maintain.

OOCSS Slideshow by Stubbornella

OOCSS Framework

Style Guide Driven Development (Discusses media block at 21:40 - 27:15)

Benefits of OOCSS


Faster websites (smaller file sizes = faster download/render)

Maintainable stylesheets (decreases specificity wars

Easy to reuse style modules

Easy to add new modules

Block Element Modifier (BEM) Syntax


BEM.info

Unlike OOCSS, it doesn't aim at total modularity but namespacing (through classes names), creating independent modules of css code that don't interact with each other

Uses "-, --, __" as separators

Mindbemding.. - Another great article

SMACSS


Smacss guide

Smacss Introduction.. Video

"is more style guide than rigid framework"

Other notable methodologies & guides


Idiomatic CSS by Nicolas Gallagher (necolas)

Google Styleguide

mdo's code guide

Hugo's css/sass styleguide