Me comentaba un amigo el otro día que echaba de menos la encapsulación en las css, es decir, que se pudieran definir reglas que solo afectasen a una parte del dom. Por ejemplo, que si ponemos algo así:
p {
margin-bottom: 1em;
}
no afectase al conjunto de reglas de la página.
Sin embargo, sí que hay una manera muy sencilla de encapsular reglas y es utilizando selectores descendentes de este tipo:
selector subselector {
//
}
De esta manera, el subselector solo actúa sobre los elementos del dom que se encuentran enmarcados por el primer selector. Así por ejemplo, si tuviéramos una página de este tipo:
<header id="cabecera">
...cosas...
</header>
<article id="main">
...cosas...
</article>
Bastaría con encapsular las css de esta manera:
#header p {
margin-bottom:1em;
}
#main p {
margin-bottom:1,5em;
}
