Metodologías CSS: aprende cómo organizar correctamente tu código

Metodologías CSS

A lo largo de este artículo vamos a conocer cómo organizar y estructurar tu código correctamente, para hacerlo mantenible y escalable. Para ello, vamos a hablar sobre metodologías CSS.

Metodologías CSS

Si ya tienes algo de experiencia con CSS, sabrás que es un lenguaje aparentemente sencillo, pero que se vuelve complejo en grandes proyectos. Si no contamos con una buena organización, nos encontraremos con grandes archivos, reglas repetidas, mal uso de !important. Vamos, una chapuza.

Meme de Batman sobre el uso de important en CSS

Para evitar este tipo de situaciones, tenemos las metodologías CSS, que no son más que sistemas preestablecidos, formales y bien documentados, que te ayudan a escribir y organizar código CSS mantenible y escalable. Por ejemplo, suelen apostar por el desarrollo de pequeños y aislados módulos, en lugar de un gran archivo de código indivisible (el típico style.css de miles de líneas que contiene TODOS los estilos del sitio web. ¿Quién puede mantener algo así de forma eficiente?).

Por todo esto, vamos a hacer un repaso de las metodologías CSS más extendidas a día hoy:

  • SMACSS
  • BEM
  • ITCSS
  • OOCSS
  • Atomic CSS

SMACSS (Scalable and Modular Architecture for CSS)

Definido por Jonathan Snook en su libro Scalable and Modular Architecture for CSS, en 2011.

El objetivo principal de esta metodología es reducir la cantidad de código y simplificar el mantenimiento. Para ello, se dividen los estilos en cinco partes:

  • Reglas básicas: se establecen los estilos por defectos de los elementos HTML individuales, los típicos selectores CSS de tipo. Por ejemplo, reset, html, body, button, h1, etc.
  • Reglas del layout: se divide la página en secciones (header, main content, footer, navigation, etc.) y se asignan los estilos relacionados con su estructura.
  • Reglas de módulos: elementos que pueden ser reusables, modulares e independientes del contexto. Por ejemplo: llamadas a la acción o galerías de imágenes.
  • Reglas de estados: se define el comportamiento del layout y sus módulos en diferentes estados: hover, active, diferentes resoluciones, etc.).
  • Reglas de temas: estilos que afectan al layout y módulos. Estas reglas son opcionales, y las puedes utilizar para estilos que puede que quieras reemplazar (normalmente se utiliza en sitios web que cuentan con varios temas, por ejemplo, uno oscuro y uno claro).

BEM (Block, Element, Modifier)

Es un sistema sencillo de nomenclatura que permite que el código sea más sencillo de leer y comprender. Ofrece un terreno común para los desarrolladores que trabajan en un mismo proyecto.

Establece tres tipos de componentes para su nomenclatura:

  • Bloque: componente independiente que tiene significado por sí mismo, es decir, un módulo (por ejemplo, un menú).
  • Elemento: es una parte del bloque que no tiene sentido por sí mismo, o dicho de otro modo, que depende del bloque. Por ejemplo, podrían ser elementos las imágenes de un slider o los elementos de un menú.
  • Modificador: se utiliza para cambiar la apariencia o estado de un elemento (hover, active, disabled, fixed, etc.).

El sistema de sintaxis es:

.bloque {}
.bloque__elemento {}
.bloque--modificador {}
.bloque__elemento--modificador {}

En resumen, es una metodología muy fácil de usar, ya que solo es aplicable a las reglas de denominación. También te permite crear código modular y flexible, además de ser fácilmente mantenible, ya que te permite obtener de un vistazo información sobre cada bloque.

Si quieres ampliar información, visita la web GetBEM.

ITCSS (Inverted Triangle CSS)

ITCSS es una arquitectura que tiene como principal objetivo estructurar la forma en la que escribimos CSS.

Para ello, se propone organizar la estructura del proyecto para poder visualizarlo como un triángulo invertido, como en la siguiente imagen:

Pirámide ITCSS

Por lo tanto, contaría con las siguientes carpetas:

  • Settings: contiene la configuración global del proyecto (fuentes, paletas de colores, etc.).
  • Tools: mixins y funciones que se utilizan a nivel global.
  • Generic: estilos de alto nivel y gran alcance (normalización de estilos, reset, definición de tamaños de elementos, etc.).
  • Elements: estilos de los elementos HTML base, sin ningún tipo de clase o id (es decir, button, p, h1, etc.).
  • Object: primera capa de estilos, con los selectores de clase. También se incluyen algunos media queries más genéricos.
  • Components: estilos de elementos reconocibles en la interfaz. Aquí va la mayor parte del trabajo, y probablemente sea la carpeta que contenga más archivos, ya que cada pequeño elemento de la web deberá tener definidos sus estilos en un archivo individual.
  • Utilities: utilizado para anular estilos que se hayan utilizado antes, porque se quiera sobreescribir para algún elemento concreto. El único sitio en el que debemos utilizar !important.

Como vemos, es una buena forma de escribir código CSS mediante un orden lógico, disminuyendo la redundancia que se suele producir, y con un enfoque de lo más genérico, a lo más específico.

Puede ser utilizado con y sin preprocesadores, y es compatible con otras metodologías ya vistas como BEM y SMACSS.

OOCSS (Object-Oriented CSS)

Establece un estándar para escribir código CSS orientado a objetos, basándose en dos ideas principales:

  • Separar la estructura del diseño.
  • Separar el contenedos del contenido.

De esta forma, se pueden obtener clases generales que pueden ser utilizadas en múltiples elementos.

Aunque es de las primeras metodologías (nació en 2009), todavía es muy utilizada a día hoy.

A través de OOCSS, los estilos se escriben únicamente utilizando selectores de clase de CSS, de ahí que sea tan reutilizable.

Por ejemplo, si queremos dar estilos a un botón, deberíamos establecer las siguientes clases:

  • .button: establece la estructura básica, común a todos los botones.
  • .blue-big: estilos para el tamaño del botón.

Como podrás imaginar, uno de los objetivos principales de OOCSS es reducir la duplicación de código, y la depedencia de los estilos de un elemento a su contenedor, utilizando muchos fragmentos de código pequeños, modulares, y asignados a clases CSS específicas.

Más información.

Atomic CSS

Con Atomic CSS se establecen clases reusables de un único propósito, con nombres basados en sus funciones visuales. En este caso, se escribe el CSS independientemente del contexto o contenido.

Gracias a la reutilización de clases se minimiza la cantidad de código, lo que permite también realizar cambios de forma relativamente fácil.

Ejemplos de usos podrían ser:

.fixed { position: fixed }
.p15 { padding: 15px }
.mb10 { margin-bottom: 10px }
.c-orange { color: orange }

El mayor inconveniente de esta metodología es que la definición de los estilos se establece, en cierto modo, directamente en el HTML, lo que ha causado que Atomic CSS reciba una gran cantidad de comentarios negativos.

Conclusiones

Aunque existen más metodologías como SUIT CSS, MCSS y AMCSS, en este artículo he hecho un repaso de las que considero más destacadas.

Cada una tiene sus ventajas e inconvenientes, y encontrar la ideal no es fácil, ya que depende mucho del tipo de proyecto. No existe una fórmula perfecta, ni debes tomar estas reglas como algo muy estricto, así que feel free de adaptarlas a tu forma de trabajar, o crear la tuyas propias. 🙂

Y tú, ¿con qué metodología de CSS sueles trabajar? ¿Por qué? Me encantará saber tu opinión, así que te invito a que la dejes en los comentarios del artículo.

Y como siempre, para cualquier duda que tengas, escríbeme a través del formulario de contacto.