OOCSS in action (part 1)

Ever since being introduced to Nicole Sullivan’s OOCSS, I’ve changed the way I develop CSS code. While I do not believe in everything┬áthat OOCSS offers, the main takeaway from me is introducing more structure and reason into my code.

Today, a typical developer might develop CSS code in this way:

And the corresponding HTML code:

Strictly speaking…there’s nothing wrong with that code. But the one thing that should stand out is its lack of re-usability. It’s pretty easy to write code specifically to accomplish a task on a page or closely-match a page comp, but OOCSS forces you to think about scalability. That is its greatest strength.

Here is how I might re-write that code in OOCSS

And the HTML code:

OOCSS gives you the concept of gridding for free. A grid can consist of one or more elements that are floated and fit next to one another in defined fragments. For example, I’ve implemented a grid of .size1of2, which allows me to put two elements side-by-side in a reusable fashion site-wide. Pretty cool huh?

I’ll go into more detail about OOCSS in future blog posts and share some tips and tricks I’ve learned along the way. Stay tuned!