Nomenclatura en CSS

General, Internet, Software

Al diseñar webs utilizando CSS para maquetar hay un paso que muchos lo damos casi sin pensar, sin darle importancia, cuando realmente sí la tiene. Me refiero a los nombres que les damos a las clases y a los identificadores.

Hay cuatro pasos básicamente al hacer una web: organización del contenido, programación, diseño gráfico y maquetación. Es usual que el primero sea el diseño gráfico porque es lo más atractivo normalmente pero si el trabajo lo hace uno sólo le influirá mucho a la hora de dar los siguientes pasos. En mi opinión lo primero debe ser la estructuración de la información porque si no es fácil caer en errores que, a la larga, pueden ser graves.

Si primero hacemos el diseño gráfico es fácil que a la hora de dar nombre a los identificadores y las clases CSS hagamos cosas como:
<br /> #capa_derecha{<br /> ...<br /> }<br /> #menu_arriba{<br /> ...<br /> }<br /> .fondo_rojo{<br /> ..<br /> }<br /> #fondo_logo{<br /> ...<br /> }<br />

Es normal, tenemos una idea en la cabeza y queramos o no, en una cosa mecánica como el dar nombres a cosas. Pero cuando intentemos utilizar una de las mayores ventajas que tiene CSS, el poder cambiar el diseño sin tocar la organización de la información, veremos que es un infierno. Porque lo que ahora está abajo a la derecha se llama menu_arriba o cualquier cosa. Por eso es muy importante quel primer paso sea el diseñar la información, a pelo, organizando todo lo que sea posible éste unos bloques de información únicos para darles identificadores y otros que se repetirán, a los que les asignaremos clases. Ejemplos que me parecen válidos:

  • Identificadores: menu_principal, menu_secundario, contenido_principal, logo, bloque_noticias, pie_pagina, …
  • Nombres de clases: parrafo_codigo, cabecera_texto, resaltado, …

Al hacer esto con esta metodología permitimos que nuestra cabecita se centre en el contenido y sea capaz de dar nombres más lógicos sin estar influenciados por el diseño. Si de lo que se trata es de separa diseño y contenido tan importante es separarlo en diferentes archivos como separarlo en nuestra cabeza, cosa que es algo más complicada.

¿Qué opinas? ¿Utilizas esta metodología o te parece mejor otra?