Convenciones de nombre para tus estilos CSS

Bien lo dice un meme de por ahí, nombrar variables en programación es un dolor de cabeza. A mi me pasa mucho no solo con las variables, sino con las clases y funciones porque tiendo a usar inglés y español para nombrarlas, o una mezcla de ambas. Un uso adecuado de nombres en programación nos facilita la vida porque nos permite saber por medio del nombre qué hace esa variable o función. En diseño web también tenemos ese problema, ¿cuál es la mejor forma de nombrar clases y id’s? aquí te voy a dar unos consejos. Entonces, veamos algunas convenciones de nombre para tus estilos CSS, ya que no es lo mismo que hacerlo en programación que cuando estás creando estilos y sobre todo, estás nombrando elementos HTML con ellos.

Un problema inicial

Si programas en Javscript sabrás que para nombrar una variable por lo general se usa el método “camel case”:

var cajaRoja = document.getElementById(‘’)

sin embargo en CSS aplicar esto mismo se vería así:

#cajaRoja{border: solid 2px #ccffff;}

aunque la convención funciona, no es la forma recomendada de escribir nombres de identificadores en CSS. La forma correcta sería esta:

#caja-roja{border: solid 2px #ccffff;}

La razón de esa convención es que de acuerdo con CSS, hay una congruencia sobre la forma en que se escriben los estilos, por lo cual también hace sentido nombrar los identificadores igual:

#caja-roja{border-radius: 5px;}

lo anterior se denomina como convención de nombres BEM.

Convención de nombres BEM

BEM es una convención de nombres muy popular que se usa para nombrar adecuadamente estilos en CSS. Los 3 principios son los siguientes:

Saber qué hace un selector, solo viendo su nombre

Tener una idea de donde usar un selector, solo viendo su nombre

Saber la relaciones entre las clases, solo viéndolos

Si tomamos como ejemplo el siguiente fulano

B de bloque, y nos dice que deberíamos nombrar el identificador con lo que representa el elemento, en este caso un fulano

.estampa-fulanito{ }

E es para elemento, y es que para este bloque también tiene elementos como la cabeza, brazos y pies

.estampa-fulanito{}

.estampa-fulanito__cabeza{}

.estampa-fulanito__brazos{}

.estampa-fulanito__piernas{}

La M es para modificador, y aplica para describir cómo se modifica el elemento

Si tenemos dos fulanitos, uno azul y rojo tendríamos lo siguiente:

.estampa-fulanito--azul{}

.estampa-fulanito--rojo{}

Si llegaramos a tener fulanitos así:

Las convenciones de nombre para describirlos serían:

.estampa-fulanito__cabeza--pequeña{}

.estampa-fulanito__cabeza--grande{}

De esa forma ahora sé que elemento de un bloque estoy modificando, así como la característica. No es necesario ver el CSS completo porque con el nombre me puedo dar una idea de qué hace el estilo. Si tiene otras propiedades está bien, pero la más importante ya me la dijo en el nombre del estilo.