Asigna nombres y reglas CSS a un máximo de ocho capas y ordena sus declaraciones. Copia la declaración y los bloques @layer en tu hoja de estilos.
Se ejecuta localmente en tu navegadorEl planificador mantiene una única lista de capas de cascada. Cada entrada tiene un nombre y las reglas que le pertenecen, y la exportación escribe una sola declaración — @layer reset, tokens, base, components, utilities; — seguida de un bloque por capa en ese orden. La pila de la derecha es esa misma lista leída de arriba abajo: la primera tarjeta se declara antes y la última gana cuando dos capas fijan la misma propiedad.
El plan parte de cinco capas (reset, tokens, base, components y utilities) con una regla de ejemplo cada una, y la cuarta está seleccionada. No hay botón de ejecución: la pila, la lectura y el panel de código siguen cada pulsación, y Copiar CSS pone ese texto en el portapapeles.
Las capas de cascada se resuelven en el orden en que se declaran, así que la capa nombrada al final del enunciado es la que gana cuando ambas fijan la misma propiedad. La pila etiqueta los dos extremos de ese orden — Primera declaración · menor prioridad en la primera tarjeta y Última declaración · mayor prioridad en la última —, mientras que las capas intermedias solo llevan la etiqueta @layer.
Mover antes y Mover después desplazan la capa seleccionada una posición cada vez, y la línea de declaración de la cabecera se reescribe al momento: las capas que ves en la pila son exactamente los nombres del enunciado, en ese orden.
El nombre de una capa se convierte en un identificador CSS: el planificador lo pasa a minúsculas, sustituye todo lo que no sea a-z, 0-9, _ o - por un guion, recorta los guiones de los extremos y antepone x- cuando empieza por dígito. Escribir MAIN LAYER exporta main-layer, y un campo vacío exporta layer.
El banco de trabajo impone dos límites: un plan admite entre una y ocho capas, y el campo de nombre se detiene en 36 caracteres. Si intentas eliminar la última capa o añadir la novena, el plan no cambia y el motivo aparece encima del panel.
Renombrar una capa con un nombre que ya usa otra está permitido, pero la exportación repite ese nombre y el navegador fusiona los dos bloques en una sola capa: las reglas de ambas tarjetas acaban juntas. El banco de trabajo avisa en cuanto ocurre, para que el duplicado se vea antes de copiarlo.
El plan no sale de la página: la lista, las reglas y el enunciado se construyen en el navegador, Copiar CSS los escribe directamente en el portapapeles y no hay subida, cuenta ni botón de ejecución. Reiniciar devuelve las cinco capas predeterminadas en cualquier momento.