Organización de estilos

[KnowDemon]

Hola,

Te aconsejo que nombres a las cosas por su funcion, no por como se van a presentar.

¿Qué tal si eso que se ve como "barra", después deseas que no se presente así? Mejor piensa que vas a meter en la "barra". ¿Un menú? ¿Publicidad? ¿Un título? ¿Es el encabezado de la página? ¿El pie?

Si es un menú nombra al elemento que lo contiene como "menu" (su clase o id). Si tu menú es una lista y se deben diferenciar de los elementos de lista del texto normal, usa selectores contextuales para tu CSS como:

#menu li{
}

Para los demás elementos de lista usas simplemente:

li{
}

Supongamos que tienes un cuadro de "mensajes" que tambien usa listas. Pero no quieres que se vean como los anteriores. Encierra tu "cuadro de mensajes" en una caja llamada "mensajes" y aplica estilos contextuales:

#mensajes li{
}

Si tienes varios menus que comparten características en común, pero tienen algo que los diferencia, probablemente sea adecuado agrupar sus estilos en común usando la misma clase para cada uno, colocando los estilos diferentes en su id:

.menu{
/*Estilos en común para todos los menus*/
}

#mprincipal{
/*Estilos del menu principal*/
}

#msecundario{
/*Estilos del menu secundario*/
}

El código HTML quedaría:

<ul class="menu" id="mprincipal">....
...
<ul class="menu" id="msecundario">...

Si tienes algunos elementos que tienen funciones diferentes, pero deseas que se vean iguales, te aconsejo que separes sus clases (aunque sean los mismos estilos). No bautizes clases por apariencia, bautiza por función.