Capas de cascada @layer
Mecanismo de CSS que inserta un nuevo escalón en la cascada por encima de la especificidad: a qué capa pertenece una regla se decide antes que cómo de específica es.
La miseria clásica es una librería de terceros cuyo .btn.btn-primary gana a tu propio .btn, así que respondes con un selector más específico, luego con otro y al final con !important. Con @layer reset, library, components, utilities; el orden se declara una vez al principio, y un simple selector de clase en la última capa gana a cualquier cosa de la primera. El orden lo fija dónde se nombran las capas por primera vez, no dónde se escriben las reglas, de modo que los imports pueden ir en cualquier orden. Un detalle que sorprende: los estilos que no están en ninguna capa ganan a todos los estilos que sí la tienen. Soportado en todos los navegadores principales desde 2022.