Esta es una clase en abierto previa al Curso de Diseño Web desde cero que vamos a impartir en EscuelaIT, la plataforma de formación de DesarrolloWeb.com.

Es una clase enfocada tanto para personas que no saben CSS, como para las que ya usan CSS, pero quieren mejorar sus prácticas y así mejorar la adaptabilidad de las hojas de estilo a las necesidades de los proyectos a lo largo del tiempo, incluso cuando se produzcan cambios en los requisitos.

Esta sesión la emitimos el martes pasado y corrió a cargo de Daniel Martínez @Wakkos, diseñador frontend que trabaja principalmente como arquitecto de CSS.

CSS es un lenguaje para definir el estilo de una web, lo que le confiere aspecto al contenido, color y forma. Podríamos decir que es como el maquillaje, con el que podemos definir cómo se ve la web. Pero CSS también sirve para optimizar un sitio, sobre todo gracias a que el documento HTML se puede elaborar sin necesidad de definir ni una sola etiqueta o atributo para aplicar estilo, pero también porque haciendo un buen CSS con código que aproveche sus características y sea fácilmente reutilizable, podremos ahorrarnos bastante código HTML innecesario y por tanto, unos preciosos Kb de descarga.

Los desarrolladores backend muchas veces producen HTML desde lenguajes como PHP, Python, .Net o similares y no les importa demasiado la calidad del HTML o la posibilidad de alguna alternativa mejor. Es por ello que los diseñadores y los desarrolladores frontend deben hacer las cosas en el CSS de modo que no se pueda romper por un mal uso y que los desarrolladores puedan tocarlo sin "cargarse" nada.

Bajo este planteamiento hemos realizado esta clase en vivo que tiene dos objetivos: por una parte dar una introducción a las CSS y por otra servir para establecer unas bases con las que desarrollar un CSS robusto, flexible y con elevada capacidad de reutilización.

Comenzamos la sesión haciendo una presentación de CSS y de algunas de las características más representativas y no precisamente a nivel básico. En concreto, mostramos la potencia que tiene el lenguaje para modificar la página incluso agregando textos antes y después de un elemento HTML, gracias a los pseudoelementos "::after" y "::before".

A continuación se explica qué es la cascada en el CSS, un concepto de vital importancia para entender y aplicar bien las hojas de estilo, así como asuntos relacionados con los selectores.

A partir de ahí nos dedicamos a ofrecer algunas referencias sobre cómo aplicar en el HTML los nombres de clases (recordar que no es adecuado definir estilos con identificador porque ese estilo no lo vas a poder reutilizar en todo el resto de la página). La idea es que que podamos entender todos los componentes del equipo el sentido y utilidad de cada una de las clases, lo que facilitará su correcta aplicación a las etiquetas HTML.

En ese sentido hablamos de una regla que se llama BEM (Bloque-Elemento-Modificador). No se trata de ninguna norma del lenguaje y no encontrarás en ningún libro técnico que te explique CSS, sino que es una forma de organizarse y que puede hacer la diferencia entre un CSS bueno y uno malo. Esta metodología nos indica cómo debemos nombrar y crear los selectores de CSS, que nos indiquen de manera más específica su uso y guíen a todo el equipo de desarrollo.

La B de "bloque" representa un componente de la página. La E de "elemento" sirve para referirnos a una parte de este bloque, un descendente del bloque; y la M de "modificador" hace referencia a un estado específico del bloque. Bajo esa convención tenemos nombres de clases como estos:

.lista

Eso sería un bloque.

.lista--roja

Es un bloque "lista" con el modificador "roja"

.lista__elemento

El bloque es la lista y el "elemento" (aquí los elementos son los LI) es el elemento (del BEM).

.lista__elemento--minusculas

El bloque es lista, elemento es "elemento" y "minusculas" es el modificador.

.lista__elemento--cuadrado

El bloque es lista, el elemento.

Para que quede más claro, veamos cómo aplicaríamos estas clases en el HTML:

<ul class="lista lista--roja">
<li class="lista__elemento lista__elemento--minuscula">
</ul>

Si te fijas, los elementos los especificamos usando un separador de dos guiones bajos y los modificadores los marcamos usando un separador de dos guiones medios.

En el vídeo nos comentó Daniel la referencia para saber más sobre este asunto, directamente en su Github un documento que engloba toda una guía para hacer mejor CSS.

Todas las guías del BEM están enfocadas para poder tener unos selectores muy descriptivos que nos informen de su uso simplemente con echarles un vistazo, pero además buscan no repetir el código. De hecho, esta es otra de las claves de uso de las CSS que vimos en este vídeo, la que se conoce con el término "DRY", que se usa habitualmente en todas las disciplinas de la programación. "Don't Repeat Yourself" que quiere decir "no te repitas" y básicamente es una de los aspectos que debemos tener en cuenta para conseguir mejor CSS.

El vídeo está lleno de consejos, bien explicados y razonados. Entenderás por qué no se recomienda trabajar con selectores de identificador en las CSS o por qué tampoco se recomienda usar selectores de etiqueta.

En definitiva, si te gustan las CSS y aprecias un trabajo bien hecho y la posibilidad de ayudarte y ayudar a otros componentes de tu equipo de trabajo, te merece mucho la pena ver este vídeo. Ya no por lo que se explica, puesto que en menos de una hora es imposible ver mucho detalle, sino para que sepas dónde están las referencias más interesantes para poder informarte, estudiar y poner en práctica.