Organización de estilos

[Patri]

Hola gente linda del foro :),

quería preguntar a la gente del foro si desde su experiencia de trabajo diario con los Css tienen alguna forma de nombrar a los estilos de una forma ordenada y de fácil comprensión.

Yo cuando trabajo comienzo a buscar las relaciones con la aplicación que va a tener el estilo, por ejemplo:

barra. csssi es que va a ir aplicado en la barra.

Pero muchas veces en la misma barra hay varios estilos aplicados... y comienzo con barra1.css o barra2.css. El tema es que es una forma de nombrarlos un tanto arbitraria, bueno no tanto, pero al tener una cantidad muy grande de estilo aplicados a un sitio, ya ni se de que estilo estoy hablando al tratar de buscarlo por el nombre, sobre todo si ese mismo estilo lo comenzé a aplicar a la barra y luego también lo apliqué a un subtitulo...

No se si es estúpida la pregunta, pero bueno. Pensé que tal vez hay una forma de estudio previo y detallado y de estructuranción de los estilos y de su nombre antes que ir armandolos en la marcha.

¿Cómo hacen ustedes?

Un saludo :) y gracias de antemano.

[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.

[Durgeoble]

puedes poner tranquilamente comentarios en el css de esa forma sabras a que corresponde cada cosa, ademas puedes organizarlo por orden general de aparicion, por funciones ect.
Lo mejor es hacerlo desde un principio

Lo de barra1, barra2 , barra3, comprueba si realmente no puedes anidar los estilos aplicando menos clases, en ocasiones se tiende a crear una clase para cada estilo cuando ers del todo innecesario

[Patri]

Muchas gracias por sus sugerencias, voy a ver de implementarlas y luego les cuento.

Un Saludo. Patri !!! :)