Introducción

Como desarrolladores web, sabemos lo importante que es tener un código legible y mantenible. Sin embargo, a menudo nos centramos tanto en la funcionalidad que descuidamos el aspecto visual de nuestras páginas web. Es aquí donde entra en juego CSS.

Cascading Style Sheets, o CSS, es un lenguaje de hojas de estilo utilizado para estilizar nuestros documentos HTML. Pero no se trata simplemente de colocar algunos colores, fuentes y tamaños de texto en nuestra página. El verdadero arte de CSS radica en escribir código limpio y legible que no solo sea fácil de mantener y actualizar, sino también escalable para futuros proyectos.

Utilizar un sistema de nomenclatura

Una de las mejores prácticas para escribir CSS limpio es utilizar un sistema de nomenclatura. Esto puede ayudarnos a identificar rápidamente las reglas CSS específicas, especialmente en proyectos más grandes.

BEM (Bloque, Elemento, Modificador)

Un sistema popular de nomenclatura es BEM (Bloque, Elemento, Modificador). Este consta de tres partes:

• Bloque: Una sección independiente de nuestra página.
• Elemento: Una parte de un bloque que no puede existir por sí sola.
• Modificador: Una variación en un bloque o elemento.

Al utilizar BEM, nuestras clases se vuelven más descriptivas y podemos comprender fácilmente la relación entre un bloque, un elemento y un modificador. Aquí hay un ejemplo:

    
.navbar {/* Bloque */}
.navbar__item {/* Elemento */}
.navbar__item--active {/* Modificador */}
    

En este ejemplo, podemos ver que "navbar" es el bloque, "navbar__item" es el elemento y "navbar__item--active" es el modificador.

OOCSS (CSS orientado a objetos)

Otro sistema de nomenclatura popular es OOCSS (CSS orientado a objetos). En lugar de enfocarse en la relación entre los elementos, OOCSS se centra en la separación de la estructura y la apariencia visual. Este sistema utiliza dos tipos de clases:

• Objetos: Clases reutilizables que definen estructuras y comportamientos.
• Estilos: Clases que definen la apariencia visual de los objetos.

Un ejemplo podría ser:

    
.container {/* Objeto */}
.full-width {/* Estilo */}
.align-center {/* Estilo */}
    

En lugar de utilizar un modificador para cambiar el aspecto visual de un elemento, en OOCSS simplemente aplicarías otro estilo.

Evitar selectores anidados

Los selectores anidados pueden ser un dolor de cabeza para mantener y actualizar. Mientras más selecciones anidados tengamos, más específico se vuelve nuestro CSS. Mientras más específico es nuestro CSS, más difícil es reutilizarlo.

En lugar de utilizar selectores anidados, intenta utilizar clases en su lugar. Por ejemplo, en lugar de esto:

    
.navbar {
  ul {
    li {
      a {
        color: #FFF;
      }
    }
  }
}
    

Podríamos simplemente agregar una clase ".navbar__link" al elemento <a>. De esta manera, nuestro CSS sería más legible y más fácil de mantener:

    
.navbar__link{
  color: #FFF;
}
    

Mantener un tamaño de archivo mínimo

Cuanto más grande sea nuestro archivo CSS, más difícil será de mantener y más lenta será nuestra página. Por lo tanto, siempre debemos asegurarnos de mantener nuestro archivo CSS lo más pequeño posible.

Una de las mejores maneras de hacerlo es utilizando herramientas como "minifiers" o "concatenators". "Minifiers" eliminan espacios innecesarios y comillas, mientras que "concatenators" juntan varios archivos CSS en uno solo. Ambas herramientas pueden ayudarnos a reducir el tamaño del archivo CSS.

Utilizar comentarios para explicar nuestro CSS

En el futuro, es posible que tengamos que actualizar nuestro CSS o ayudar a otros desarrolladores a trabajar en nuestro proyecto. Por lo tanto, es importante utilizar comentarios para explicar nuestra estructura CSS. Estos comentarios deberían ser significativos y explicar la lógica detrás de nuestros estilos.

    
/* Hace que el botón se expanda cuando se pasa el cursor sobre él */
.btn:hover {
  transform: scale(1.2);
}
    

Conclusiones

Escribir CSS limpio y legible es importante para cualquier proyecto. Utilizar un sistema de nomenclatura, evitar selectores anidados, mantener un tamaño de archivo mínimo y utilizar comentarios significativos son solo algunas de las mejores prácticas que podemos seguir para mantener nuestro CSS organizado y fácil de mantener.

Al comenzar un nuevo proyecto, siempre debemos tomarnos el tiempo para establecer una estructura organizada del archivo CSS y mantenerla durante todo el proyecto.