Orden para organizar CSS

[Vunarok]

Suponiendo que tengo este codigo html:

Código:

<ul id="specials">
    	<li>
        	<div class="special">
            <h2>Titulo</h2>
            <img src="#" alt="" />
            </div>
        </li>
        
        <li>
        	<div class="special">
            <h2>Titulo</h2>
            <img src="#" alt="" />
            </div>
        </li>
    </ul>

Deberia poner el CSS asi:

Código:

ul#special {
}

ul#special li {
}

ul#special li div.special {
}

ul#special li div.special h2 {
}

ul#special li div.special img {
}

O de esta otra forma:

Código:

ul#special {
}

ul#special li {
}

ul#special div.special {
}

ul#special h2 {
}

ul#special img {
}

Y podria poner muchas otras formas que se van a aplicar de la misma forma, pero cual orden se debe seguir, cual es la mejor forma ?

Saludos

[ryugen]

Lo que tienes que tener en cuenta en CSS para armar una hoja de estilos son dos conceptos:

1º Cascada: Los estilos se aplican de arriba hacia abajo y tiene mayor preponderancia aquel que esté más cerca del elemento.

2º Especifidad: Cada uno de los selectores que escribis tienen un peso o especificidad y una regla de mayor peso le gana a otra de menor peso, por más que este más lejos.

Este documento será clarificatorio: http://html.conclase.net/w3c/css1-es...den-de-cascada

[cristian_cena]

Usa la forma que quieras, todas son válidas y de acuerdo a la necesidad algunas formas tomarán mas relevancia que otras.

Si te refieres a que "si puedes saltearte" elementos en el camino, pues si, puedes saltearlos, pero en este caso pregúntate si no es mejor identificar ese elemento con un id.

Por ejemplo: En mi caso uso esta forma "ul li a" cuando no uso id, y sino voy al grano y pongo "#mielemento" y ya.

Puedes ver sobre "selectores css".
Saludos