Multimedia Universitat Oberta de Catalunya

OOCSS: CSS orientado a objetos

César Córcoles

[Última actualización: 21/10/2018]

El «CSS orientado a objetos» es una metodología para escribir CSS (y HTML) que pretende fomentar la reutilización de código y la creación de webs en que la combinación de HTML y CSS tenga un mejor rendimiento y mantenibilidad. Toma su nombre de la programación orientada a objetos, algunos de cuyos principios toma como inspiración (aunque, naturalmente, las diferencias entre ambas cosas son más que notables). Se trata de una metodología que adquiere especial sentido en sitios y aplicaciones web de complejidad elevada en los que trabaja un buen número de personas. Tal y como dicen en HTML and CSS performance (O’Reilly Radar, 28 de enero de 2014),

…En nuestra industria se debate sobre los patrones para nombrar elementos, pero yo recomiendo elementos semánticos para sitios de tamaño pequeño a mediano. Un sitio grande como Facebook debería usar un patrón de nombres orientado al objeto por la escala del sitio y la cantidad de desarrolladores que tocan el código. Pero para el sitio medio ser semántico con los nombres de elementos puede ser tremendamente beneficioso a la hora de reutilizar código o eliminar elementos innecesarios…

Un buen texto introductorio sobre el tema es An Introduction To Object Oriented CSS (OOCSS).

Por otro lado, un texto sobre los posibles efectos perniciosos del uso de esta metodología es Cargo Cult CSS (21 de octubre de 2013).

Un tema complementario a considerar es el de cómo dar nombre a las clases que utilizamos, especialmente cuando se trata de proyectos grandes en los que colaboran varias personas. Un texto interesante a leer sobre el tema es MindBEMding – getting your head ’round BEM syntax (enero de 2013), que propone una sintaxis «BEM» en función de bloques, elementos y modificadores.