Los errores más comunes al seleccionar los nombres para las clases CSS
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.