OOCSS and SMACSS — really?

A formalized methodology like OOCSS (Object Oriented CSS) or SMACSS (Scalable and Modular Architecture for CSS) represent my current best hope of making any real sense of this CSS crap. In other words, I’ve chased my tail enough.

SMACSS (pronounced “smacks”), by Jonathan Snook, a true guru, is in his own words:

…an attempt to document a consistent approach to site development when using CSS.


Because it turns out Guru Snook is not a masochist. Most probably — like me — he lost enough sleep having nightmares that turning off his nightlight would cause a power outage in three states. In a cold sweat he realized he needed a formalized approach to writing CSS.  Thus, he curated his thoughts as SMACSS, or:

techniques that can keep CSS more organized and more structured, leading to code that is easier to build and easier to maintain.

Thanks, Jonathan!  SMACSS is more of style guide than anything else, which gives you a methodology for building out your code.

My other best hope is OOCSS.

I came across Stubornella reading an article by Necolas about HTML semantics and front end architecture.  (Read anything Necolas writes, by the way. Just do it.)

Stubornella is Nicole Sullivan, and she’s six degrees of awesome.

The two main points of her OOCSS mantra are:

  1. Separate structure and skin
  2. Separate container and content

Here’s a good YouTube playlist to wet your whistle on OOCSS:

An advocate of combining the best of both approaches is yet another guru Shay Howe:

Choosing which methodology to use, if any, is completely up to you and what you feel is best for a given website. Generally speaking, a solid mix of both OOCSS and SMACSS works well, borrowing principles from each methodology as you prefer.

Shay’s free lessons on coding advanced HTML and CSS are an excellent place to spend time ridding yourself of the notion that you are a total clueless ignoramus web developer. The feeling may not last, though, so you’d better be prepared to come back a few times.

Leave a Reply

Your email address will not be published. Required fields are marked *