CSS encapsuladas

Cómo encapsular las reglas de las hojas de estilo

Alphonse Mucha

archivado en: HTML/CSS / 11 mayo, 2015

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;

}

|| Tags:

valoración de los lectores sobre CSS encapsuladas

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • estrellica valoración negativa
  • 3 sobre 5 (2 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.