soy Kseso y esto EsCSS

Estilos acotados: "style scoped" Próximamente en los mejores navegadores

Estilos acotados: "style scoped" Próximamente en los mejores navegadores

·Por Kseso ✎ 1

HTML5 añade a las diversas formas de incluir Css en una página la posibilidad de hacerlo también de forma acotada, esto es style scoped. De esta forma, los estilos declarados sólo afectarán al elemento padre que los contenga y a sus descendientes, pero no a sus hermanos y ascendentes.
Hoy por hoy, si utilizas esta forma afectará a todo el documento, no sólo a los descendientes de la caja donde los incluyas, pese a que esta característica ya es soportada por Firefox y Chrome, de momento viene deshabilitada.
Vamos con un ejemplo, que se verá mejor.

Tomemos el siguiente código:

<body> <div><p>Un párrafo</p></div> <div> <style> p { color: red; } </style> <p>un párrafo</p> <p>Un párrafo</p> </div> <p>Un párrafo</p> </body> </html>

Esto hoy nos muestra los cuatro párrafos en rojo. El estilo no sólo se aplica a los dos p que que son hijos del div que contiene los estilos, también al del primer div, su hermano, y al último que es hijo del body.
Resumiendo: los estilos así declarados afectan a todo el árbol, sin tener encenta las dependencias.

Sin embargo, declarando <style scoped></style>Los estilos sí respetan el DOM. Sólo se aplicarán al elemento raíz que los contiene y a sus descendientes. Todo lo que esté fuera de él no se "contaminará".

Pues usa id´s o clases

Tienes razón. Bastaría llenar de id´s o clases estas declaraciones para que no hubiese contagio. Pero recuerda que tampoco es muy conveniente el uso/abuso de esos selectores kilométricos tipo #id1 #id2 .clase1 .clase2.subclase p.rojo. Pero esta es otra discusión. Recuerda que es un recurso más a utilizar cuando sea soportado.

¿Qué pasa con la separación estilos/contenido?

Esta objeción también es muy buena. Pero ocurre que hay situaciones donde es más recomendable, práctico y eficiente poder cargar un Css sólo si va a ser necesario y en el momento que lo sea en vez de tener un enlace en el head y que carguen múltiples hojas. Con independencia de que se usen o no.

Aquí viene bien traer como apoyo el concepto modular de la web. Hoy ya hay bastantes casos donde viene muy al pelo:
¤ Si incluyes contenidos de terceros (twitter, facebook...), widgets, o tu proyecto es lo suficientemente extenso y compuesto por infinidad de módulos diferentes y diferenciados: cada uno lleva sus estilos con él y los usa sólo cuando se requiere sin afectar o verse afectado por el resto. Al contrario significa tener un Css kilométrico, difícil de mantener o modificar y más pronto que tarde surgirán conflictos por herencia o cascada.
¤ Incluso en algo tan sencillo y limitado como este blog, para mostrar ejemplos concretos. O incluyo los estilos en el propio artículo o me voy al css general y los coloco allí. No gracias. En la página o módulo que los necesita en exclusiva están muy bien.

Bonus pre-final

En las hojas de estilos en el cuerpo de la web se pueden definir los pseudoelementos y las pseudoclases Son plenamente funcionales. A diferencia de lo que ocurre con los estilos en línea.

Bonus final 18 de Abril:

"Saving the Day with Scoped CSS" artículo de css-tricks sobre el particular. Échale un vistazo.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso