Dudas con respecto a la estructura de una Hoja de Estilo (CSS)

[rjfcont]

Hola Chic@s, pues nada eso... tengo serias dudas o inquietudes respecto a como inicial o dar estructura a una hoja de estilo.

Resulta que soy muy metódico. Y bueno en cuanto al código HTML no hay problema porque existe una estructura, una semántica, un orden de cómo hacer las cosas. Más sin embargo a la hora de querer dar estilos no sé por dónde empezar.

Para no darle más vueltas al asunto lo que quiero es que comenten como suelen llenar o realizar sus hojas de estilos. ¿Hay algunas cosas que deba declarar en primera estancia? Para ir tomando consejos o referencias. Realmente lo apreciaría y de antemano gracias.

[NaTxosS]

Creo que a la hora de hacer CSS no hay problema de orden ni tabulaciones, todo lo coge CSS, pero por amor propio y por sentido común algo habrá que hacer para no hacer ilegible nuestro código.
Yo suelo empezar con los elementos padres e ir tabulando los supuestos hijos debajo del padre, cuando sigo con otro elemento del mismo nivel del padre le aplico la misma tabulación que a esté. No se si me explico.

Código [Seleccionar] Expandir


body {
   estilo..
}
divContenedor {
   estilo..
}
    divContenedor elementoHijo1{
           estilo..
    }
    divContenedor elementoHijo2{
           estilo..
    }
         divContenedor elementoHijo2 elementoHijo2_1{
                estilo..
         }
divFooter {
   estilo..
}


Algo así

[[u]nsigned]

La verdad que no hay reglas o patrones (al menos no que yo sepa). Lo que si trata de optimizar tu css en función de tus necesidades, y evitar repetir código.

Por ejemplo si tenés definidas 3 reglas para 3 elementos DIV y en cada una de ellas terminan teniendo las mimas reglas podrias crear una clase nueva y delarar esas reglas una sola vez. Te pongo un ejemplo basico:

Archivo CSS 1:

Código (css) [Seleccionar] Expandir

#midiv1{
   color:red;
   font-size:13pt;
   border:1px solid red;
   background-color:#ffc
}

#midiv2{
   color:red;
   font-size:14pt;
   border:1px solid red;
   margin-top:2px;
}

#midiv3{
   color:red;
   font-size:13pt;
   border:1px solid red;
}

Como ves en todas tenemos repetida la regla del color y el borde, entonces podemos mejorar nuestro CSS con algo así:

Código (css) [Seleccionar] Expandir


#midiv1{
   font-size:13pt;
   background-color:#ffc
}

#midiv2{
   font-size:14pt;
   margin-top:2px;
}

#midiv3{
   font-size:13pt;
}

.rojito {
    color:red;
    border:1px solid red;
}


La idea es obtener un código mas compacto y facil de mantener.

Saludos

[rjfcont]

Gracias por sus respuestas, son de gran ayuda!

Ahora mi inquietud es otra. ¿Cómo ordenan sus hojas de estilo?

Me refiero a: ¿Suelen declarar las id y class al comienzo o al final? ¿Van llenando la hoja acorde a la estructura del HTML? ¿Es decir primero declaran todos los estilos de Body, luego Header, Nav, etc?

[#!drvy]

Normalmente se hace acorde a la estructura de la pagina. Si un elemento no se utiliza, no se decora de forma que te ahorras lineas inútiles. Vas desde la cabecera hasta el footer de la pagina acorde a los elementos utilizados.

Saludos

[flacc]

podrías probar con less o con sass, obtimizan mucho a la hora de trabajar con css.