La arquitectura CSS no tiene un consenso sólido entre sus desarrolladores ya que técnicas, tendencias y teorías emergen de forma frenética generando controversias en relación con sus diferentes formas de aplicación y a la eficiencia de estas. Y es que si algo tiene CSS (y el desarrollo de software en general) es su versatilidad: hay decenas de formas de llegar a un mismo resultado.

Es por ello que la mejor forma de aprender una sólida (y consensuada) base en lo que a la arquitectura de CSS se refiere es comprender las bases de desarrollo de software y aplicarlas a nuestro lenguaje. Diseñar la arquitectura de tu código sobre la base de estas características te garantizará estar creando un código estable y de calidad:

Código predecible

Dentro de una arquitectura predecible las nuevas reglas de estilo que son añadidas reaccionan de forma previsible: no sufren contaminación alguna por parte de otras reglas (tampoco hacia otros elementos) ni existen dependencias incongruentes entre las reglas de los diferentes elementos del plano. En definitiva, no hay sorpresas.

Por ejemplo, ¿podemos afirmar que la declaración que sigue no corre el riesgo de terminar dando estilo de forma impredecible a elementos para los que no estaba orientada?:

Francamente, no. Lo más probable es que necesitemos disponer de un <span> dentro de un párrafo con otra variación tipográfica que no sea negrita. En este caso se hace necesario optar por crear una clase (la divitis existe, la clasitis no) que salvaguarde la previsibilidad y consistencia de nuestro código:

Código reutilizable

La abstracción (aislar un elemento de su contexto o del resto de los elementos que lo acompañan) es un paradigma de programación con una útil aplicación en nuestro entorno. Mantener la abstracción en la arquitectura de CSS nos permitirá diseñar reglas modelo, aptas para infinidad de elementos con características comunes:

En el ejemplo superior hemos creado una clase .cuadrado que hace de modelo abstracto, reuniendo las características que todos los items del plano comparten y pueden reutilizar (borde, ancho, alto, disposición…), además de una que no es común pero sí predominante (color de fondo).

Si observas el HTML, este diseño nos ha permitido utilizar un sistema de clases cohesivas que se acumulan en torno a la clase abstracta .cuadrado y aplican las propiedades diferenciales en cada variación del elemento, resolviendo con 460 caracteres de CSS un estilo que hubiera requerido en torno a 1.500 caracteres si hubiéramos seguido una metodología individual para cada item (código reutilizable y con una optimización del 60%, ¡Yay!).

Código mantenible

Esta característica está referida a la facilidad con la que puede realizarse una modificación y/o mantenimiento de un código. Algunas de las prácticas que garantizarán este aspecto son:

  • Ordena, comenta y categoriza tu código de forma lógica y jerárquica: los estilos de tu CSS deben seguir un orden planificado que vaya desde los aspectos más básicos en primera instancia, hasta los elementos más específicos en última, identificando cada uno de los niveles de esta jerarquía a través de comentarios que describan a qué están referidas las reglas que contienen.

    En el Pen anterior vemos un sencillo ejemplo de ordenación jerárquica de código:

    • Primero, aspectos base o globales (fuentes y reseteo de estilos).
    • Seguidamente los estilos generales para elementos comunes o reiterativos del site, siguiendo una sub-jerarquía lógica
      1. Estilizado de elementos globales: cuerpo, secciones, etc.
      2. Estilizado de componentes: títulos, párrafos, botones, etc.
      3. Declaración de clases auxiliares: espaciado entre caracteres de cualquier texto, tonalidades de fondos, etc.
    • Finalmente, declaraciones destinadas a elementos que pertenecen a secciones o apartados específicos, con estilos propios y únicos que ya no se ajustan a un ámbito general y cuyas reglas no son reutilizables para ningún otro elemento del plano (elementos específicos de las secciones newsletter, footer y otras). ¡Cuidado!: un abuso de estos últimos puede conllevar un deterioro de la escalabilidad del CSS (ver sección escalabilidad)
  • Crea código legible: dentro de cada regla, destina una línea nueva a cada propiedad, utiliza tabulaciones para separar todas las propiedades y valores que lleve dentro anidados 1 y separa con un espacio cada propiedad de su valor 2. Aplica un salto de línea para separar las reglas entre sí 3 y no dudes en utilizar servicios de embellecimiento de código como BeautifyTools, que te devolverán tu CSS impoluto.
    Ejemplo ordenacion codigo CSS

    Ejemplo de reglas con alta legibilidad

  • Crea código intuitivo: evita selectores descendientes a partir de tres niveles, ya que combinar selectores en exceso en vez de nutrir al HTML de clases puede llevar a no comprender a simple vista a qué elemento apunta:
    Ordenacion de codigo

    Ámbos selectores apuntan al primer enlace de navegación. Adivina cuál es intuitivo.

  • Declara clases descriptivas: cuando declares clases, hazlo dándole un valor semántico a sus nombres que describa de forma clara el objetivo al que apuntan. Declarar una clase .bt-r en vez de .boton-rojo apenas ahorrará unos caracteres, pero seguir esta dinámica a lo largo de un proyecto te traerá grandes quebraderos de cabeza.

Código escalable

Salvaguardar la escalabilidad de tu CSS supondrá que éste podrá ser manipulado de una forma sencilla al realizar las tareas necesarias para abordar el crecimiento de la plataforma. En estos casos la curva de aprendizaje que permitirá comprender y adquirir las capacidades necesarias para alterar tu código no debería ser excesivamente grande.

Un proyecto que disponga de una planificación de su arquitectura a corto/medio plazo puede ayudarnos en buena medida a entender este aspecto, ya que conocer de antemano qué necesidades tendremos que cubrir en base al crecimiento que sabemos que tendrá la plataforma nos orientará a seguir estas indicaciones por pura intuición:

  • No incluyas selectores descendientes de alta diferenciación jerárquica: desarrollar selectores descendientes partiendo de alguno de los contenedores a los que pertenece el elemento (sus padres) es una práctica común que evita la contaminación de otros elementos del proyecto, pero cuando la diferencia jerárquica es muy alta supone un problema de escalabilidad. Si los elementos de una jerarquía baja como son los componentes -botones, enlaces, widgets- se estilan a través de selectores que parten de elementos de jerarquía muy superior como puedan ser secciones o incluso páginas, estamos declarando reglas cuyos selectores tendrán que ser modificados para ser aprovechables en otras páginas. Por ejemplo, dar formato a citas testimoniales de esta forma hará que la regla no tenga alcance fuera de la página con id #pagina-testimonios:

  • Ante un conflicto, divide la regla: reutilizar una regla durante una fase de crecimiento estructural puede generar un conflicto incluso si ha sido declarada convenientemente. En este ejemplo, cuando queramos crear una .galeria en una posición diferente a la declarada inicialmente nos encontraremos con un problema: el aspecto sí es reutilizable, pero la posición no. La solución pasa por descomponer la regla inicial, no reescribirla.

Conclusión

Como ves, estas cuatro características de una arquitectura óptima de CSS tienen una estrecha relación entre sí. La experiencia y la práctica te acercarán progresivamente a ellas permitiéndote a ti (y a los que hagan uso de tu código en un futuro) trabajar de forma más cómoda sobre una estructura eficiente y estable.

Codifica siempre como si la persona que fuera a mantener tu código fuera un asesino en serie maníaco que sabe donde vives.