Los errores más comunes al seleccionar los nombres para las clases CSS

Un listado de los errores que más se encuentran en los desarrollos CSS/HTML y que más problemas causa su utilización.

Al realizar proyectos de maquetación web surgen un conjunto de problemas recurrentes en lo referente a los nombres de las clases CSS que elegimos para poner estilos al código HTML que previamente hemos desarrollado.

A continuación voy a describir los más comunes, y los problemas que nos acarrearán si decidimos utilizarlos.

1.- Usar nombres de clase que contengan el estilo que van a modificar

Por ejemplo:

margin-bottom button-padding

Por que no usarlo:

El primer motivo para no usar este tipo de nombres es que si durante el desarrollo, o en posteriores modificaciones, esta propiedad ya no es necesaria en la clase, este nombre quedaría desfasado, indicando un estilo gráfico que ya no realiza.
Otro motivo, es el relacionado con la organización de código o separación de capas conceptuales, el HTML debe describir la estructura de una página o elemento web y el CSS su aspecto gráfico, por lo tanto, si usamos:

<div class="margin-bottom"></div>

estamos generando un acople en el que en el HTML se está describiendo un aspecto gráfico. Además, no se ve muy distinto del siguiente ejemplo, que claramente es un error:

<div style="margin-bottom: 15px"></div>

2.- Usar nombres de clase que contengan referencias al contenido que tendrá el HTML

Por ejemplo:

nombre-libro lista-pelicula

Por que no usarlo:

Uno de los principios a tener en cuenta al generar codigo CSS es DRY (Don't repeat yourself), por lo que, si para poner un título a una película, optamos por en nombre de clase titulo-película, esta no podrá ser utilizada por ningún otro elemento en la página web o aplicación aunque éstos compartan estilo gráfico, por ejemplo, no podrá ser utilizado para dar estilos gráficos al nombre de un actor aunque se vean exactamente igual.

3.- Usar nombres de clase que contengan referencias a la etiqueta HTML que va a usarla

Por ejemplo:

button-big li-item

Por que no usarlo:

La explicación es similar a la del primer punto, pues caemos en los mismos errores, en una posterior modificacion de las etiquestas HTML se generaría incongruencias entre el elemento y el nombre de la clase, pudiendo llegar a cosas como esta:

<a href="#" class="li-item">test</a>

También incumplimos el principio DRY (Don't repeat yourself), pues no podríamos usarlo en alguna otra etiqueta que requiera un mismo estilo gráfico.

Para terminar, el siguiente planteamiento:
Tanto el código HTML como el CSS forman parte de la programación, por lo que deben regirse por los mismos principios y patrones.