Los desarrolladores web (es decir, usted) pueden crear clases CSS y nombres de identificación y usar estos nombres para identificar Divs y otros elementos y etiquetas de la página. Para los desarrolladores, al nombrar selectores CSS que redefinen etiquetas XHTML (etiquetas), deben asegurarse de que coincidan con precisión con las etiquetas predefinidas, pero en cuanto a los nombres de los selectores de clases e ID, es una cuestión de opinión. Sin embargo, no es una buena costumbre nombrar estas clases e ID como desee.
Después de leer una serie de artículos sobre clases CSS y convenciones de nomenclatura de identificadores escritos por Andy Clarke (de Stuff and Nonsense y All That Malarkey) y Eric Meyer, comencé a pensar en el uso de clases e identificadores en mi propio proceso de diseño de sitios web. Método de denominación.
Denominación intuitiva
Al diseñar una página web y necesita identificar un Div, la idea más natural es nombrar el elemento usando palabras que describan su ubicación en la página. Este enfoque hace que los nombres de clase y de identificación se vean así:
panel superior
navegación horizontal
lado izquierdo
columna central
columna derecha
Estas son formas válidas de nombrar clases e identificadores CSS y XHTML. Estos términos son simples y descriptivos, satisfaciendo así la necesidad de identificar los elementos de la página y sus estilos CSS correspondientes.
El problema es que dicho nombre está asociado con una expresión específica del contenido de la página. Estos nombres se refieren a la posición de los elementos de la página dentro de un diseño de página específico, por lo que su uso fuera de dicho diseño sería inapropiado o incluso confuso. Al mismo tiempo, estos nombres no implican la estructura del contenido del documento. Por lo tanto, aquí hay una mejor manera de nombrar clases e ID de CSS.
Denominación estructurada
El marcado estructurado significa una separación completa de la información de expresión/ubicación del contenido; esto incluye los nombres de clase e ID que aparecen en el marcado.
La información relacionada etiquetada se utiliza para describir la estructura del documento en lugar de su apariencia. Esta característica nos permite reutilizar contenido y marcas en diferentes formatos de apariencia simplemente cambiando CSS. Cuando comprende este método, es fácil descubrir que usar la posición de la página para nombrar clases e identificadores es muy inapropiado cuando se trata de formatos de apariencia como el audio. Por lo tanto, las clases y los identificadores deben estructurarse y denominarse según su propósito en el documento en lugar de dónde aparecen.
Las clases y los nombres de identificación se pueden nombrar de forma estructurada como se muestra a continuación:
herrada
navegación principal
subnavegación
contenido principal
barra lateral
Estos nombres son tan fáciles de entender como las convenciones de nomenclatura intuitivas, pero describen la función del elemento de la página en lugar de su ubicación. Esto hace que el código sea más coherente con la intención original de utilizar marcado estructural puro, es decir, los desarrolladores pueden manejar formatos de visualización en varios medios sin cambiar el marcado.
Incluso si no planea formatear sus páginas web en otros medios, el uso de nombres estructurados puede ayudarlo a facilitar futuras actualizaciones o rediseños del sitio. Por ejemplo, la denominación estructurada evita confusión cuando un div con el mismo ID en la columna derecha se mueve al lado izquierdo de la página. Nombrar la barra lateral div de esta manera es más apropiado porque no importa en qué lado de la página aparezca, el nombre sigue siendo intuitivo y fácil de entender para los desarrolladores.
algunas convenciones de nomenclatura
Andy Clarke analizó el código fuente de 40 sitios web diseñados por desarrolladores que defendían conceptos de diseño web estandarizados. Aunque los nombres de clase e identificación son muy inconsistentes, todavía se encuentran algunos nombres comunes que aparecen con frecuencia. Aquí se proporciona una lista de ejemplo de los nombres de clase/id más utilizados:
encabezamiento
contenido
navegación
barra lateral
pie de página
¿Estos nombres comunes de clases e ID marcan el nacimiento de un estándar o la formación de una convención generalmente aceptada? Aunque esto es lo que espero, no lo creo. Realmente me gustaría ver un conjunto de estándares de nombres para elementos de página comunes que vemos todos los días. Al mismo tiempo, el uso de un método de denominación estandarizado puede facilitar la búsqueda de elementos de la página y la actualización del sitio web, especialmente cuando es necesario alternar el trabajo entre sitios desarrollados por diferentes desarrolladores en diferentes momentos.