El alcance de CSS ha sido un desafío constante. @scope introduce control de cascada basado en proximidad, aplicado por el navegador.

La regla @scope

@scope (.card) { .title { font-size: 1.25rem; } } limita estilos a un elemento raíz y sus descendientes. La novedad clave es la proximidad de alcance: estilos más cercanos al elemento tienen prioridad. Puedes definir límites con to (.card__footer).

Shadow DOM

Aislamiento total de estilos, marcado y comportamiento. Esencial para bibliotecas de widgets distribuidos, pero añade sobrecarga de ejecución.

CSS Modules

Generan nombres de clase localmente únicos en tiempo de compilación. Sin sobrecarga en ejecución. Soporte TypeScript con definiciones de tipos auto-generadas.

BEM

Previene conflictos mediante nomenclatura disciplinada (bloque__elemento--modificador). Sin herramientas de build, pero escala mal en proyectos grandes.

Estrategia práctica híbrida

CSS Modules para alcance a nivel de clase, @scope para gestión de cascada, Shadow DOM solo para bibliotecas reutilizables, BEM para utilidades globales.