Thomas R Alexander

Manager, Developer, and professional problem solver

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!

Previous Article

Leave a Reply

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

*
*
You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">


1 + 6 =