En los últimos años hemos podido encontrarnos con diferentes escenarios que han hecho pensar/reaccionar a las grandes compañías en diferentes puntos del mundo web. CSS Scoped es una característica que, a simple vista, puede parecer poco práctica o incluso un antipatrón, cuando lo ideal es trabajar manteniendo una separación de capas también en el lado de front end (HTML, Javascript y CSS por separado). Scoped se trata de un atributo que, asignado a un bloque de estilos y dentro un bloque de etiquetas HTML, nos permite modificar las propiedades para un conjunto de elementos en particular.

<div class="example">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Clients</a>
        </li>
        <li><a href="#">Contact Us</a>
        </li>
    </ul>
    <div>
        <style scoped>
            a {
                background-color: #52ACCC
            }
        </style>
        <ul>
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">About</a>
            </li>
            <li><a href="#">Clients</a>
            </li>
            <li><a href="#">Contact Us</a>
            </li>
        </ul>
    </div>
</div>

En el código anterior, vemos que tenemos un div con la clase example que encapsula dos listados. Sin embargo, en el segundo de ellos, queremos que no se apliquen los estilos generales que podamos tener asociados al layout o a una vista en concreto. Para ello he vuelto a encapsular este segundo bajo un div, he añadido un bloque style con el atributo scoped y asignado un color al fondo de los enlaces del listado. Todos los elementos que estén bajo el mismo parent que el bloque style se verá afectado.

Si estamos trabajando con Firefox o Chrome (habilitando en chrome://flags/ la opción «Enable experimental WebKit features.»), podemos ver el resultado en este ejemplo en JSFiddle.

Como comentaba al inicio de este post, muchos pueden verlo como una aberración o de poca utilidad (yo al principio así lo creía). Lo cierto es que pueden haber escenarios muy concretos donde tener conocimiento de este atributo puede facilitarnos el trabajo:

• Mantener el CSS general libre de casos muy particulares y concretos o evitar un segundo recurso si es que lo tenemos aislado.
• Secciones donde el usuario puede interactuar con HTML y se le da este privilegio.
• En el trabajo con algunos CMS, donde la modificación de estilos puede estar demasiado restringida.
• Como «herramienta» durante el desarrollo
• Etcétera.

Podéis comprobar su avance en CanIUse.com

¡Saludos!