Acceder al contenido principal

Arquitectura CSS en Drupal 9

Volver a Blog

Arquitectura CSS en Drupal 9

16 Jul 021
CSS
Miriam Uriarte Solucionex

CSS , Drupal ,

Las metodologías CSS nos ayudan a escribir un código CSS de forma organizada. Dadas las particularidades del lenguaje es fácil dejarse llevar y caer en cierta desorganización que, si bien, no repercute en el resultado visual del producto, sí complica el trabajo a los desarrolladores.

Los objetivos de una arquitectura CSS son obtener un código:

  • Predecible: Cada regla CSS debe comportarse tal y como se espera, sin afectar a otras partes de la web.
  • Reutilizable: Las reglas deben ser abstractas y desacopladas, de manera que permitan crear nuevos componentes fácilmente.
  • Mantenible: Debe ser posible añadir nuevas características utilizando o extendiendo las reglas existentes sin necesidad de refactorizar.
  • Escalable: Debe ser fácil de mantener en el tiempo.

Hay varios enfoques que proponen diferentes maneras de organizar los archivos CSS. Las más habituales son:

  • OOCSS: Oriented Object CSS.
  • BEM: Blocks, Elements y Modifiers.
  • SMACSS: Scalable and Modular Architecture for CSS.

Hoy nos centraremos en BEM y SMACSS ya que son las que utiliza Drupal desde su versión 8.

SMACSS

Esta metodología divide las hojas de estilo en 5 categorías:

  • Base: Se utiliza para definir los estilos de encabezados, párrafos, enlaces, etc… No se deben utilizar IDs ni clases en las hojas de estilo de esta categoría.
  • Layout: En esta categoría se engloban los estilos más generales, como los de las distintas secciones de la página.
  • Module: En el caso de Drupal se cambia por Component. Aquí es donde se deben colocar los estilos de cada uno de los componentes de la interfaz.
  • State: Hace referencia a los cambios de estado que se producen con la interacción del usuario. Por ejemplo: is-invalid al cumplimentar un formulario.
  • Theme: Esta última categoría es opcional. Generalmente se usa para ofrecer diferentes opciones al usuario, como por ejemplo cambiar la paleta de colores o la tipografía utilizada.

 

BEM

Se articula entorno a los conceptos Bloque, Elemento y Modificador, para organizar la interfaz mediante bloques reutilizables y ecalables, fáciles de mantener.

  • Bloques: Son cada uno de los contenedores donde se ubican los elementos. Para Drupal esto serían los componentes como por ejemplo los nodos o los menús.
  • Elementos: Cada una de las partes que componen el bloque. Dependen de él y no pueden existir de manera independiente.
  • Modificadores: Se utilizan para poder añadir estilos a un elemento o bloque específico que presenta alguna diferencia con el original, permitiendo reutilizar el código.

Para la nomenclatura de las diferentes clases se siguen algunas convenciones. Se utilizan dos guiones bajos para indicar el bloque al que pertenece el elemento y dos guiones medios para indicar el modificador. Los nombres resultantes son bastante largos, pero facilitan la identificación de los elementos y modificaciones de cada componente.

Un ejemplo de esta nomenclatura aplicada a un menú de navegación de Drupal sería:

<nav class="menu">
   <a href="" class="menu__item">Home</a>
   <a href="" class="menu__item menu__item--active">Contact</a>
</nav>


Ambos enfoques son complementarios y nos permiten tener un código CSS organizado y fácilmente entendible por otros desarrolladores.

Comentarios

Añadir nuevo comentario