Metodología CSS: Object Oriented CSS (OOCSS)

OOCSS se centra básicamente en la reutilización de código, la búsqueda de patrones y la abstracción de componentes, consiguiendo así hojas de estilo más eficientes, rápidas y mucho más fáciles de mantener

Éste es el primero de 3 post en los que explicaré las distintas metodologías que existen actualmente para maquetar código CSS. El objetivo es profundizar en cada una, empezando por OOCSS (Object Oriented CSS), y explicar de qué manera podemos organizar nuestras hojas de estilo para conseguir un código mucho más limpio, semántico y fácil de mantener.

Las distintas metodologías que trataré son:

• Object-Oriented CSS (OOCSS), Hojas de Estilo orientadas a objetos: 22 de Marzo
• Block, Element, Modifier (BEM): 22 de Abril
• Scalable and Modular Architecture for CSS (SMACSS): 22 de Mayo

Aunque puedas considerar este artículo como ‘técnico’ -a decir verdad, resulta necesario conocer previamente algo de CSS-, puede resultar útil para diseñadores gráficos o arquitectos de la información, pues creo fervientemente en el conocimiento transversal que deben adquirir los equipos que se forman para proyectos de (re)diseño de una interfaz.

¡Empezamos!

A nadie le sorprenderá cuando digo que CSS es un lenguaje muy fácil de aprender, pero a su vez es, quizá, de los más difíciles de mantener, sobre todo cuando nuestro sitio web va creciendo en volumen, páginas, componentes, etc.
Es aquí cuando centrarse en una metodología nos ayudará a ordenar nuestro código, incluso a entender mejor el diseño de la interfaz que vayamos a maquetar.

OOCSS: Object Oriented CSS

OOCSS se centra básicamente en la reutilización de código, la búsqueda de patrones y la abstracción de componentes, consiguiendo así hojas de estilo más eficientes, rápidas y mucho más fáciles de mantener.

¿Qué consideramos un ‘Objeto’ en CSS?
Un ‘Objeto’ en OOCSS constituye, simplemente, un patrón visual de nuestra interfaz que se repite a lo largo de nuestro proyecto. Puede ser representado mediante una porción de código HTML independiente y, sobre todo, puede (y debe) ser reutilizado tantas veces como sea necesario. De este modo, llamaremos al objeto ‘Módulo’.
Estos ‘módulos’ pueden ser desde botones, contenedores genéricos, medias, widgets o incluso una página entera; hasta cualquier elemento de nuestra interfaz que pueda repetirse y ser considerado ‘objeto’. Para construirlo, deberemos tener en cuenta sus posibles variaciones de estilo, estado o incluso contenido.

Principios Básicos

Nicole Sullivan creó en 2009 este sistema de maquetación CSS, con dos conceptos claros en mente:

1. Separar el estilo de la estructura del objeto

Cada componente de nuestro página tiene un estilo visual propio, como los borders, backgrounds o colores de letra. La idea es encapsular ese estilo en lo que llamaremos Skins (pieles) para aprovecharlo en otras estructuras u objetos de nuestra web, con independencia de la semántica que usemos en nuestro HTML.
Para que esto tenga sentido, vamos a tener que maquetar nuestros objetos y sus propiedades usando exclusivamente clases, nunca identificadores. Nuestras skins ahora son reutilizables.Éste es código CSS sin aplicar OOCSS:

#modulo{
width:300px;
height:300px;
overflow-y: scroll;
border: 1px solid #999;
background-color: rgba(135, 135, 135, 0.5);
color: #F00;
}

#boton{
width:200px;
height:45px;
padding:5px 20px;
overflow:hidden;
border: 1px solid #999;
background-color: rgba(135, 135, 135, 0.5);
color: #F00;
}

#noticia{
width:300px;
height:auto;
border: 1px solid #999;
background-color: rgba(135, 135, 135, 0.5);
color: #F00;
}

Claramente, podemos detectar que existe una parte del código que afecta de manera independiente a cada estructura y, por otro lado, existe un código común, que se repite en cada objeto. Es este el código -el de las últimas tres líneas- que podemos encapsular en una clase skin nueva y poder reutilizarla.

Éste es el concepto de OOCSS:

.modulo{width:300px;
height:300px;
overflow-y: scroll;
}

.boton{
width:200px;
height:45px;
padding:5px 20px;
overflow:hidden;
}

.noticia{
width:300px;
height:auto;
}

.mi-nueva-skin{
border: 1px solid #999;
background-color: rgba(135, 135, 135, 0.5);
color: #F00;
}

Ahora todos los elementos usan clases y podemos ver como todos los estilos comunes se encapsulan en una sola clase tipo skin. De este modo, nuestro código HTML resultará:

a class="“boton"
div class="modulo"
div class="“noticia"

Así ahorramos código, a la vez que aprovechamos el existente.

2. Desacoplar el contenido del contenedor

El segundo principio de OOCSS consiste en separar, en nuestra hoja de estilos, los contenedores de su contenido. Básicamente, se trata de que nunca usemos tags HTML para definir estilos y que usemos siempre clases en su lugar.
Pongamos el ejemplo de un módulo genérico HTML:

div class="mod"
div class="inner"
h2
p
/div
/div

Ahora bien, si queremos dar estilo como título a nuestro H2, lo correcto es utilizar un CSS como .mod h2{ … }, y esto implica que siempre deberemos usar h2 como cabecera de nuestro módulo.Para corregir esto, podemos crear una clase para dar estilo a nuestra cabecera como class=“mod-heading”.
De esta manera conseguiremos que:

• todos los h2 sin clase tengan el mismo estilo
• cualquier elemento con la class=“mod-heading” tendrá el mismo estilo, por lo que podremos usar cualquier elemento HTML
• no hará falta sobrescribir el estilo de nuestra cabecera si realmente queremos que se vea como un h2, simplemente quitaremos la clase

Por último, nuestro código se verá mucho más semántico:

div class="mod skin"
div class="inner"
h2 class="mod-heading"
p class="mod-body"
/div
/div

En conclusión

Ya hemos visto en qué se basa esta metodología. En el fondo, no es más que un concepto o una manera de poner orden en nuestras hojas de estilo, teniendo siempre en cuenta la reutilización y el desencapsulamiento de estructuras HTML.

Aunque veamos nuestro código HTML lleno de clases -bajo mi punto de vista mucho mejor: gana en legibilidad-, conseguiremos unas hojas de estilo mucho más ligeras, dado que eliminamos todo el código repetido.

Por otro lado, también tendremos nuestras hojas de estilo mucho más ordenadas.

El uso de procesadores como SASS o LESS nos ayudará a mantener nuestro CSS, pudiendo trocear nuestro código directamente en objetos o módulos.

Para acabar, me gustaría comentar que OOCSS se implementa en todos los Framework de referencia en el mundo de la maquetación (Bootstrap, Foundation, etc.).