A quick overview on the advantages to architect you HTML in an "Object Oriented" approach

Tags

I am reading quite a few comments on mailing lists about how they'd like to improve the markup but show what we were doing many years ago. Ahem. When we were NOT yet doing HTML5.

I would like to remind that OOCSS as far as I recall is to use CSS selectors in an Object Oriented approach.

Nicole Sullivan, who coined the term made it pretty clear.

Separate CSS effects and assemble afterward.

Namely, separating:

  • Structure and Skin
  • Container and Content

Just think of things for their use, more than the specifics:

  • helper link beside input
  • placeholder where form buttons are
  • Region where there is call to action
  • Label is beside input/label over input
  • Error message in any case possible

With the following requirement:

All this and more are the benefits of imementing OOCSS

I recommend to have a look at markup libraries such as Twitter bootstrap, jQuery UI Bootstrap (jQuery UI, writing Twitter Bootstrap markup), Kickstrap, Zurb Foundation, Pea.rs, and others. I have a list on my delicious account tagged as css+framework

As an example of this concept, I wrote a plugin to create a form confirmation window using only two class names.

References