¿Es importante el orden de las reglas dentro de un único archivo css?

Question

¿El orden de las reglas dentro de un solo archivo css hace la diferencia?

<div id="wrapper> 
    <div id="a> 
     section a 
    </div> 
    <div id="b> 
     section b 
    </div> 
    <div id="c> 
     section c 
    </div> 
</div> 

¿Puede el estado de necesidad div #C a estar por debajo de #A y #B, o se la clara: ambos no trabajar?

#wrapper { 
color: #CCC; 
} 

#c { 
clear:both 
} 

#a { 
float: right; 
} 

#b { 
float: left; 
} 

Answer 1

En el caso de reglas igualmente específicas que se aplican al mismo elemento, la última gana.

Si usted tiene el estilo:

.foo { color: red; } 
.bar { color: blue; } 

Y el marcado:

<div class="foo bar">Test</div> 

A continuación, el texto en el div será de color azul. Si cambia el orden de las reglas, será rojo.

Answer 2

El pedido es realmente importante.

Ver http://msdn.microsoft.com/en-us/library/aa342531%28VS.85%29.aspx#specf

Para citar, en parte:

3. Ordenar por especificidad del selector: los selectores con selectores de anulación especificidad superiores que son más generales. La especificidad se calcula concatenando el recuento de (a) atributos de ID, (b) atributos de clases y pseudoclases, y (c) nombres de tipos y pseudoelementos en el selector.

Por ejemplo, cada uno de los siguientes selectores podría aplicarse a un único elemento LI; sin embargo, solo se aplican las declaraciones con la mayor especificidad en caso de conflicto.

*    {} /* a=0 b=0 c=0 -> specificity = 0 */ 
li   {} /* a=0 b=0 c=1 -> specificity = 1 */ 
ul li   {} /* a=0 b=0 c=2 -> specificity = 2 */ 
li:first-line {} /* a=0 b=0 c=2 -> specificity = 2 */ 
ul ol+li  {} /* a=0 b=0 c=3 -> specificity = 3 */ 
li.class  {} /* a=0 b=1 c=1 -> specificity = 11 */ 
li#id   {} /* a=1 b=0 c=1 -> specificity = 101 */ 

4.Sort por orden especificado: si dos reglas tienen el mismo peso y la especificidad, el último analiza victorias. (Tenga en cuenta que las hojas de estilo especificadas con una regla @import se analizan primero.) Los selectores que aparecen más adelante en la hoja de estilo se usarán si hay algún conflicto. Por esta razón, los selectores de enlace de pseudo-clase siempre deben usarse en el siguiente orden.

También vea http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/ para una descripción más amplia con más ejemplos.

Tenga en cuenta que ya que no hay superposición en su ejemplo, el orden no es importante. Si, por otro lado, tuvieras estilos conflictivos, entonces el peso, la especificidad y el orden serían relevantes. Supongo que su ejemplo en la pregunta es bastante simplificado.

Answer 3

El pedido solo importa si las reglas se aplican al mismo atributo del mismo elemento. (En ese caso, la última regla "gana"). En su ejemplo, la orden no hará ninguna diferencia.