Metodologías para nombrar estilos en CSS

La mantenibilidad y claridad del código CSS son aspectos importantes en el desarrollo web. Un enfoque estructurado para nombrar estilos facilita la comprensión y el mantenimiento de tu código.

Metodología CSS

Una metodología CSS es un conjunto de reglas, convenciones y mejores prácticas diseñadas para organizar y escribir estilos CSS de manera estructurada y mantenible.

Estas metodologías proporcionan una guía sobre cómo nombrar clases y organizar el código para mejorar la legibilidad, la reutilización y la escalabilidad del CSS. Veamos las principales metodologías CSS existentes.

1. BEM

BEM (Block, Element, Modifier) es una metodología que ayuda a crear componentes reutilizables y mantenibles. Su estructura se basa en tres conceptos:

Block: Un contenedor independiente que representa una entidad significativa.
Element: Una parte del bloque que tiene un propósito y función específica. Se usa como separador __, por ejemplo: block__element.
Modifier: Una variación que altera la apariencia o comportamiento. Se usa como separador --, por ejemplo: block--modifier.

Ejemplo de BEM:


/* Bloque */
.button {
  font-size: 13px;
  padding: 2px 8px;
}

/* Elemento */
.button__icon {
  margin-right: 8px;
}

/* Modificador */
.button--large {
  font-size: 16px;
  padding: 4px 16px;
}

En HTML:


<button class="button button--large">
  <span class="button__icon"></span> Buscar
</button>

2. OOCSS

OOCSS (Object Oriented CSS) se basa en dos principios que promueven la reutilización del código y la reducción de redundancias.

Separación de estructura y presentación: Este principio sugiere que la estructura y la apariencia de los elementos deben estar separadas en el CSS.
Separación de contenedor y contenido: Este principio establece que los estilos de un contenedor no deben depender de los estilos de su contenido.

Ejemplo de OOCSS:


/* Estructura */
.card {
  border: 1px solid #ccc;
  padding: 16px;
}

/* Presentación */
.card--highlighted {
  background-color: yellow;
}

En HTML:


<div class="card card--highlighted">
  Contenido destacado
</div>

SMACSS

SMACSS (Scalable and Modular Architecture for CSS) es una metodología que organiza el CSS en cinco categorías:

Base: La categoría Base incluye los estilos globales y las reglas CSS que se aplican a los elementos HTML por defecto. Aquí se suelen definir los resets, normalizaciones y estilos tipográficos básicos.
Layout: Los estilos de Layout se ocupan de la estructura principal de la página. Incluyen contenedores, secciones y otras áreas que definen la disposición general del contenido.
Module: La categoría Module incluye los estilos de los componentes más pequeños y específicos de la interfaz de usuario. Los módulos son bloques independientes y reutilizables, como tarjetas, botones, formularios, etc.
State: Los estilos de State se utilizan para representar diferentes estados de un módulo o layout, como activo, inactivo, visible, oculto, etc. Estas clases se suelen usar para indicar cambios en la interfaz de usuario.
Theme: La categoría Theme incluye estilos que alteran la apariencia de los módulos y layouts para diferentes temas o skins. Esto permite cambiar el aspecto visual de la aplicación sin modificar la estructura base de los estilos.

Ejemplo de SMACSS:


/* Base */
body {
  font-family: Arial, sans-serif;
}

/* Layout */
.layout-header {
  background-color: #333;
  color: white;
}

/* Module */
.module-card {
  border: 1px solid #ccc;
  padding: 16px;
}

/* State */
.is-hidden {
  display: none;
}

/* Theme */
.theme-dark {
  background-color: #000;
  color: #fff;
}

En HTML:


<header class="layout-header">
  <div class="module-card theme-dark">
    Contenido de la tarjeta
  </div>
</header>

Atomic Design

Atomic Design es una metodología que se basa en cinco niveles de componentes: Átomos, Moléculas, Organismos, Plantillas y Páginas. Esta estructura promueve la creación de componentes pequeños y reutilizables que se combinan para formar interfaces complejas.

Átomos: Los átomos son los componentes más básicos e indivisibles de la interfaz. Incluyen elementos HTML básicos como etiquetas, inputs, botones y otros elementos que no pueden descomponerse más.
Moléculas: Las moléculas son conjuntos de átomos que trabajan juntos como una unidad. Representan componentes más complejos que combinan varios átomos para formar una funcionalidad específica.
Organismos: Los organismos son combinaciones de moléculas y/o átomos que forman secciones relativamente complejas de una interfaz. Son componentes más grandes que pueden incluir varias moléculas trabajando juntas.
Plantillas: Las plantillas definen la estructura de la página combinando organismos y otros componentes. Son un esqueleto que muestra cómo se organizan los diferentes componentes en la interfaz sin preocuparse por los datos específicos.
Páginas: Las páginas son instancias específicas de las plantillas que contienen contenido real. Aquí se sustituyen los datos genéricos de las plantillas por información específica, mostrando cómo se verá el producto final.

Ejemplo de Atomic Design:


/* Átomo */
.button {
  background-color: blue;
  color: white;
  padding: 8px 16px;
}

/* Molécula */
.button-icon {
  display: flex;
  align-items: center;
}

/* Organismo */
.card {
  border: 1px solid #ccc;
  padding: 16px;
}

En HTML:


<div class="card">
  <button class="button button-icon">
    <span class="icon"></span> Buscar
  </button>
</div>

Conclusiones

Seleccionar la metodología adecuada para nombrar estilos en CSS depende del proyecto y del equipo de desarrollo. BEM es excelente para grandes equipos que necesitan una nomenclatura clara y consistente. OOCSS y SMACSS son ideales para proyectos que requieren una alta modularidad y reutilización. Atomic Design fomenta la creación de componentes reutilizables.

Es importante usar alguna metodología o convención para la creación de nombres de estilos, esto ayudará a entender el código fuente y favorece la manenibilidad.