[SOLUCIONADO] El orden de los estilos

[limakid]

Sé que el orden en que se aplican los estilos es determinante es HTML, pero si nos referimos solamente a la hoja CSS, es importante el orden? No me refiero al código html.

O sea daría igual si declaro en ese orden...

footer {
font-size:0.85em;
}

y después...

body {
background color: blue;
}

header {
width:100%
}

al final de la hoja porque recién recién me acordé.

Si se trata de...
#contenido .articulo1 ul li.... por supuesto aquí el orden (la SINTAXIS) es importantísimo, pero no me refiero a eso.

Pienso que la hoja es solo un inventario de los estilos usarse y nada más. El orden no importa, pero en HTML sí. ¿Estoy en lo cierto o estoy equivocado?

[xKuZz]

Sí, mientras que se encuentren al mismo nivel de prioridad da exactamente igual que lo pongas arriba que abajo. También te digo que si por casulidad te aparecen dos definiciones del mismo selector (por ejemplo header) la válida será la última. De todas maneras, te recomiendo que sigas un cierto orden (no tiene que ser el de un HTML puede ser el que creas oportuno respetando la sintaxis en cascada de CSS) para facilitarte poder volver a modificarlo.

Saludos.

[limakid]

Iniciado por xKuZz

si por casualidad te aparecen dos definiciones del mismo selector (por ejemplo header) la válida será la última.

Gracias. Y esto me deja otra duda. Qué pasa si en la misma hoja tengo...

header {
width: 100%;}

header {
width 15%;}

... gana la del 15% por ser el último estilo declarado?

Yo uso dreamweaver y me crea a veces las mismas clases repetidas en la hoja. No se borran automáticamente si dejo de aplicarlas.

[xKuZz]

Exacto gana el del 15 % por ser el último

PD: Si por ejemplo has declarado
h1 {
color: orange;
text-align: center;
}
y luego
h1 {
color: green;
}

Se te queda el text-align en center y el color en green digamos que según va bajando los va "sobreescribiendo".

[pzin]

Aunque sea el último no se aplica por ser el último, sino por ser el último y tener la misma especificidad y no haber atributos en algún otro lugar marcados como importantes. Si tienes una regla (un selector) con una mayor especificidad, se acabará aplicando ese.

Código CSS:

header#global {
  color: red;
}
 
header {
  color: blue;
}
 

El color sería rojo.

Lo mismo pasa si usas !important, aunque a nivel de atributos.

¿Es importante el orden? El orden siempre es importante, para todo lo que hagas en la vida. Solo por el hecho de trabajar de forma más ordenada es más cómodo y eficiente.

[limakid]

Muchas gracias x las respuestas precisas.

[HackID1]

Como bien te lo han comentado, es importante y además es buen método para posteriormente modificar el código de una manera rápida y eficaz.

Y claro para eso existen los tipos id y class, en estos también es de importancia saber su buen uso y llevarlos a la práctica.

No es solo usar id o class en todo el código CSS, sino conocer el porque de su existencia y en que nos pueden beneficiar para realizar códigos de diseño más cortos y eficaces sin repertir demasiados estilos que se pueden agrupar de diferentes formas en los códigos de varias páginas de tu sitio.


Saludos