Tu tercer ejemplo trata de encadenar selectores simples mediante el combinador descendente, que es como una versión más difusa y lenta del combinador hijo. Si no es compatible con IE6, debería utilizar el combinador descendente en su lugar.
Por ejemplo, #twitter p frente a #twitter>p. Primero, el navegador reúne todos los elementos p, luego sube un nivel y comprueba si este elemento tiene el id «twitter». Si no lo tiene, el navegador se detendrá aquí si has utilizado el combinador descendente. Con el combinador descendente viajará hasta el nodo raíz (si no encuentra algún #twitter en su camino). Por lo tanto, los falsos positivos son siempre ligeramente más lentos con el combinador descendente.
El mayor problema con el combinador descendente es su imprecisión, que aumenta la posibilidad de colisiones. Como efecto secundario, la creación de estructuras anidables de forma arbitraria se vuelve mucho más complicada.
.container #twitter p también es demasiado específica. ¿Realmente quieres que los elementos p dentro de #twitter se vean diferentes si #twitter no está dentro de .container?
Otro problema es que .container es una ubicación y no parte de la estructura. Así que, sí… esa regla no es reutilizable.
CSS escalable = código reutilizable = clases. Las reglas basadas en Id son, por definición, no reutilizables.
Comentarios recientes