Capas CSS

Qué son las capas CSS

Las capas CSS (@layer) son una especificación nativa del navegador que permite definir un orden explícito de prioridad entre grupos de estilos, independientemente de la especificidad de los selectores.

En un proyecto WordPress típico, los estilos provienen de múltiples fuentes: el tema padre, plugins, WooCommerce, Tailwind CSS y estilos personalizados. Sin capas, la única forma de resolver conflictos es aumentar la especificidad o usar !important, lo que genera CSS frágil y difícil de mantener.

Con @layer, cada grupo de estilos se asigna a una capa con un orden predefinido. Los estilos en capas de mayor prioridad siempre ganan, sin importar la especificidad del selector.

El problema que resuelve

Cuando se combina Bricks Builder con Tailwind CSS (vía WindPress), los estilos del tema suelen tener selectores más específicos que las clases utility de Tailwind. Esto provoca que clases como text-xl o bg-red-500 no se apliquen correctamente.

/* Sin @layer: el selector más específico gana */
.brxe-heading h2 { font-size: 2rem; }    /* Especificidad: 0-2-1 */
.text-xl          { font-size: 1.25rem; } /* Especificidad: 0-1-0 — PIERDE */

/* Con @layer: el orden de la capa decide */
@layer theme    { .brxe-heading h2 { font-size: 2rem; } }
@layer utilities { .text-xl { font-size: 1.25rem; } } /* GANA — capa superior */

Orden de capas

FlowKit define un orden de capas que se aplica de menor a mayor prioridad:

Con y sin WindPress

El comportamiento del panel cambia según si WindPress (Tailwind CSS para WordPress) está instalado:

Con WindPress activo

• El orden de capas se detecta automáticamente desde los archivos CSS de WindPress y Tailwind
• FlowKit escanea uploads/windpress/data/ y uploads/windpress/cache/tailwind.css para encontrar directivas @layer
• El campo de orden en el panel se muestra como solo lectura
• Para modificar el orden, se cambia desde la configuración de WindPress

Sin WindPress

• El orden de capas es editable manualmente desde el panel
• Se define como una lista separada por comas: base, theme, components, utilities, custom
• El orden se guarda en la opción ft_child_layers[layer_order]

Asignación de handles por capa

El corazón del sistema es la tabla de asignación, donde se indica qué hojas de estilo CSS pertenecen a qué capa.

Cómo funciona

• Cada fila de la tabla asocia una capa CSS con uno o más handles de WordPress
• Un handle es el identificador interno que WordPress usa para registrar hojas de estilo (por ejemplo, bricks-frontend, woocommerce-general)
• Al asignar un handle a una capa, FlowKit envuelve automáticamente su CSS con la sintaxis @import url(...) layer(nombre)
• Se pueden crear múltiples filas para asignar distintos handles a distintas capas

Interfaz del panel

Caché e invalidación

FlowKit incluye un sistema de caché propio para las capas CSS:

• Las hojas de estilo envueltas en @layer se cachean para evitar procesamiento en cada petición
• La caché se invalida automáticamente al guardar cambios en el panel de capas
• También se invalida al añadir o eliminar filas de asignación

Ejemplo práctico

Supongamos un sitio con Bricks Builder, WooCommerce y Tailwind vía WindPress:

1. Configurar el orden

base, theme, components, utilities, custom

2. Asignar handles

3. Resultado en el HTML

@layer base, theme, components, utilities, custom;

@import url("bricks-frontend.css") layer(theme);
@import url("woocommerce-general.css") layer(components);
/* Tailwind escribe en layer(utilities) automáticamente */

Con esta configuración, las clases de Tailwind siempre ganarán sobre los estilos de Bricks y WooCommerce, y los estilos personalizados del proyecto (capa custom) ganarán sobre todo.

Configuración

El panel de capas CSS se encuentra en FlowKit > Capas CSS en el panel de administración de WordPress.