Cuando se trata de construir nuestros archivos CSS, debemos considerar qué tan fácil es para cualquier otra persona agregar nuevos elementos al diseño o modificar los actuales.
Existe una forma más modular desarrollada por Nicole Sullivan, en la que podemos construir los archivos CSS: CSS Orientado a Objetos (OOCSS). Esta forma pretende brindar extensibilidad y mantenibilidad a nuestro código CSS, sin dejar de lado la facilidad de comprensión del mismo.
El objetivo de esta metodología es “escribir código CSS escalable, sano y mantenible”, en palabras de Sullivan, quien usa y recomienda un “grid framework” de la conocida librería de Yahoo “Yahoo YUI”. Sin embargo, cada quien puede escribir su CSS sin necesidad de este framework pero aplicando los principios del OOCSS.
El adoptar el uso de OOCSS, implica el pensar en reutilización de estilos y su fácil mantenimiento. Cada componente es una estructura fija HTML, en la cual se aplican una seria de reglas CSS que controlan su diseño (estructura) y otra serie de reglas CSS que controlan su apariencia (piel o “skin”).
Una recomendación de Sullivan es evitar a toda costa lo que ella llama “selectores basados en la ubicación”, esto es, estilos que afectan el contenido según la ubicación que tengan en la página. Para esto, ella recomienda agregar una clase base para el objeto HTML y agregar clases “hija” que son las que aplican los estilos según la ubicación en la página; con esto, este CSS puede ser fácilmente reutilizado en otro lugar del sitio.
Ejemplo
Supongamos que todas las páginas del sitio tienen un menú lateral, cuyo código CSS es el siguiente:
<div class=”menulateral”>
… contenido del menú ...
</div>
Ahora, supongamos que hay una página de noticias en la que queremos que este menú tenga un estilo diferente, por ejemplo, diferente color de fondo. Tradicionalmente, se agregaría una clase al <body> de esta forma:
<body class=”noticias”>
Con esto, las reglas de estilo que se escribirían para esa página serían algo así:
body.noticias .menulateral {
background-color: #FF0000;
}
El enfoque recomendado por OOCSS es diferente. En vez de tener una clase aplicada al <body>, se crea una clase por cada tipo de elemento que se quiere que se vea diferente. Con OOCSS, el ejemplo anterior cambiaría a lo siguiente:
.noticiasmenulateral { /* extends .menulateral*/
background-color: #FF0000;
}
Esta clase hereda de la clase existente que describe el estilo estándar para el elemento. Así, se aplica “en adición” a la clase base existente:
<div class=”menulateral noticiasmenulateral”>
… contenido del menú ...
</div>
Conclusión
Siguiendo estos principios, se puede tener una estructura bastante ordenada y reutilizable no solamente en el mismo sitio sino en otros proyectos; además que OOCSS brindaría beneficios significativos en cuanto al rendimiento de las páginas.
Al enfocarse en reutilizar estilos CSS en todo el sitio, con OOCSS los archivos CSS serían considerablemente más pequeños, aunque los archivos HTML sean un poco más grandes. Esto es deseable ya que el tamaño de los archivos CSS influencia directamente la cantidad de tiempo que el navegador usa para desplegar una página en blanco mientras el sitio carga. Archivos CSS más pequeños implican menos tiempo invertido leyendo una página en blanco.
Evitando los selectores basados en la ubicación, se reduce la cantidad de trabajo que el navegador debe hacer para determinar la apariencia de un elemento específico en la página. Tanto en dispositivos móviles, como en el escritorio de computadoras, puede producir un mejoramiento en el rendimiento del sitio.
Un aspecto que debe tomarse muy en cuenta, es la facilidad o complejidad que puede resultar del OOCSS en un equipo de trabajo, ya que motivar a todo un equipo a adoptar OOCSS puede convertirse en un compromiso muy grande. Lo que convendría es aplicar OOCSS en un proyecto pequeño y decidir si vale la pena aplicarlo en proyectos más grandes en los que varias personas se encuentran involucradas.
Información Complementaria
