Una de las cosas más frustrantes de heredar un proyecto de otra persona, es cuando las convenciones de nomenclatura para clases e identificadores no tienen ningún sentido. Esto puede dificultar una actualización o un rediseño y puede hacernos perder mucho tiempo. En este artículo te daremos algunos consejos sobre como nombrar a las clases e identificadores de tus proyectos, de manera que sean fácilmente entendibles por otros desarrolladores.

Algunos ejemplos

Imagínate que te encuentras con el siguiente código:

.f18 {
        background: #fff;
        border: 1px solid #ff0;
        font-weight: bold;
        padding: 10px;
}
.izquierda {
        border: 1px solid #ff0;
        float:left
}

Si nos encontramos con un código como este, seguramente perderemos mucho tiempo tratando de localizar estas clases e intentando averiguar cual es su función. Cuando nos enfrentemos a un rediseño, es muy posible que un elemento como class=”izquierda” termine arriba, abajo o a la derecha y por tanto ese nombre de clase no tenga ninguna relación con el nuevo diseño.

Por lo tanto si por class=”izquierda” nos referimos a un menú situado a la izquierda, usemos mejor class=”menu-navegacion”. En cuanto a la clase f18, no tenemos ni la más remota idea de a que hace referencia, por lo que es mejor que el desarrollador nombre a esa clase según la función que cumpla. De este modo esta nomenclatura sería mucho más inteligible:

.MensajeAlerta {
        background: #fff;
        border: 1px solid #ff0;
        font-weight: bold;
        padding: 10px;
}
.menu-navegacion {
        border: 1px solid #ff0;
        float:left
}

Pero más allá del contexto, las convenciones de nomenclatura semántica son útiles para ahorrar tiempo. Por ejemplo, si asigno la clase “Caja-azul” a un cuadro de ayuda en un sitio cuyo color corporativo es azul y la empresa cambia su color corporativo a rojo. Caja-azul no significará nada en este nuevo contexto.

En ese caso no sólo tendrás que actualizar el valor hexadecimal de ese estilo, sino que tendrás que cambiar todas las referencias a ese color. Si hubieras usado en su lugar la clase “llamada” (o algo igualmente significativo), te podrías haber ahorrado mucho trabajo.

Consejos para mejorar la nomenclatura de nuestros css

• El nombre de nuestras clases e identificadores no debe describir una característica visual, como color, tamaño o posición. Tampoco debe describir una función o comportamiento.
• El nombre debe ser específico y claro, para que otras personas puedan entender su significado.
• Si después de todo, crees que es imprescindible definir una clase única y exclusivamente para alinear una imagen o un párrafo y llamarla con esa acción, documentalo apropiadamente, para que los otros desarrolladores tengan problemas en el futuro. 
• Separa las palabras mediante guiones o mayúsculas. Por ejemplo menu-superior o menuSuperior.
• En todo caso, es mejor no hacer uso excesivo de clases, porque a menudo es más sencillo utilizar selectores contextuales o una combinación de selectores que no alteren el HTML.

En conclusión

Las clases e identificadores deberían llamarse según la función o contenido que describen y de manera independiente respecto a factores de presentación. De este modo, cuando actualicemos un sitio, no tendremos que preocuparemos en cambiar todos los nombres cada vez que modifiquemos el diseño, sino simplemente cambiar las propiedades que nos hagan falta.

Para seguir investigando

• El blog woorkup.com nos ofrece un muy buen artículo (en ingles), que nos enseña la mejor mejor manera de nombrar las diferentes secciones de nuestros sites.
• stuffandnonsense nos propone una lista (en ingles), con las nomenclaturas más populares.