You are on page 1of 2

Object Oriented CSS

Texto tomado de: http://www.vanseodesign.com/css/object­oriented­css/ 
 
CSS is not an object oriented language and the programmer in you might be cringing at the 
name. Still it’s not hard to understand why Nicole chose the object oriented moniker. 
 
A css object is any repeating visual pattern, which can be abstracted into a snippet of html, css, 
and sometimes javascript. These visual patterns become objects or modules through css 
classes that can be reused throughout a project or projects. 
 
The goal of Object Oriented CSS is to encourage code reuse for faster and more efficient 
stylesheets that are easier to maintain. OOCSS is a also framework developed by Nicole 
Sullivan based on 2 main principles 
● Separate structure and skin 
● Separate container and content 
 
Separate Structure and Skin 
Most every design is going to have repeatable visual elements. 
 
You might for example have several buttons throughout a design that share size and shape as 
well as a thin border and small border­radius to round the corners 
 
Instead why not define the repeating visual patterns common to all as separate modules or skins 
that can be reused? 
 
These classes become objects we can add to our html and have our elements look consistent. 
Classes can be mixed and matched to create greater variety and flexibility in the display of 
elements. 
 
Elements can use semantic html for their structure and different classes can then be added to 
describe the presentation of that structure 
 
Separate Container and Content
Rarely should we use location dependent styles, because those styles become locked into 
specific selectors. A visual object should look the same no matter where you place it. 
 
Better is to not tie your css to location in the first place. 
 
Documento creado por Francisco Quintero 
What OOCSS asks us to do is spend more time upfront thinking about what will be common 
across different elements and then abstract those commonalities out into reusable modules. We 
don’t however want to attach our modularized classes to specific elements. Instead of div.box 
we want .box. The latter allows us to add the box styles to any container, while the former ties 
them to divs alone 
Getting Started 
The hardest part of adopting OOCSS will probably be the change in thought process. We’ve 
been following the same habits and best practices for such a long time they’ve become 
ingrained in our workflow. 
 
It might help to slowly change some of our css practices. 
 
● Abstract common styles into classes (objects) for reuse 
● Think classes for styling hooks 
● Think ids for behavioral hooks 
● Stay away from descendent selectors 
● Avoid location based selectors (.box instead of div.box) 
 
If you’re looking to use OOCSS without having to dive in all at once, following the above 
guidelines where you can and making them habit might be your best approach. 
 
Some of the benefits of Object Oriented CSS are as follows. 
● Greater reuse of styles — modules of css can be added anywhere 
● Less duplication of code — Repeatable css patterns are in a single location 
● Flexibility and variety —by combining classes 
● Faster sites — less duplication should result in smaller file sizes 
● Ease of maintenance — Code is located in one block instead of many 
● Standards based — Easier to improve one block of code instead of many 
 
One last criticism of OOCSS is that is seems to eschew the use of ids entirely. That’s not the 
case. The idea is to avoid ids for styling, but to still use them for javascript hooks. OOCSS isn’t 
saying classes are better than ids, but rather that each is more appropriate in a different place. 
Classes for presentation styles and ids for behavioral hooks. 
 
Para más información: https://github.com/stubbornella/oocss/wiki 
Documento creado por Francisco Quintero