El problema: CSS duplicado por todas partes
Imagina que tienes 12 tarjetas de servicio en tu web. Cada una tiene el mismo color de fondo, el mismo borde, el mismo border-radius y el mismo padding. Si has dado esos estilos directamente sobre cada elemento en el panel de Bricks, lo que ha pasado por debajo es esto:
/* Tarjeta 1 */
#brxe-aabbcc { background: #ffffff; border: 1px solid rgba(0,0,0,0.07); border-radius: 14px; padding: 1.75rem; }
/* Tarjeta 2 */
#brxe-ddeeff { background: #ffffff; border: 1px solid rgba(0,0,0,0.07); border-radius: 14px; padding: 1.75rem; }
/* Tarjeta 3 */
#brxe-112233 { background: #ffffff; border: 1px solid rgba(0,0,0,0.07); border-radius: 14px; padding: 1.75rem; }
/* ... y así hasta la tarjeta 12 */Bricks genera un bloque de CSS por cada elemento con ID único. Si tienes 12 tarjetas con los mismos estilos aplicados individualmente, tienes 12 bloques de CSS que dicen exactamente lo mismo. Multiplicado por todos los elementos de tu web — botones, títulos, secciones, badges — el resultado puede ser fácilmente varios cientos de líneas de CSS innecesario.
⚠️ ¿Por qué es un problema real? Ese CSS extra tiene que descargarse, parsearse y aplicarse en cada carga de página. En móvil o conexiones lentas, es tiempo de carga que el usuario nota. Y Google también lo nota — el CSS no utilizado o duplicado penaliza directamente los Core Web Vitals.
La causa: estilizar elemento a elemento
El flujo de trabajo más común cuando alguien empieza con Bricks es este:
- Añades un elemento — por ejemplo un contenedor
- Abres el panel de estilos y le pones el color de fondo, el padding, el border-radius…
- Duplicas el elemento para la siguiente tarjeta
- Le cambias el contenido pero los estilos ya están aplicados al ID del elemento
- Repites el proceso en otra página
El resultado: cada elemento tiene sus propios estilos anclados a su propio ID. No hay reutilización. No hay sistema. Y cuando el cliente te pida cambiar el border-radius de todas las tarjetas de 14px a 16px, tendrás que cambiarlo en cada elemento individualmente.
La solución: el Gestor de Estilos de Bricks
Bricks 2.x introdujo el Gestor de Estilos, una herramienta que cambia completamente la forma de trabajar con los estilos. En lugar de dar estilos elemento a elemento, defines un sistema de clases y variables reutilizables que se aplican a todos los elementos que lo necesitan.
El mismo ejemplo de antes, con el Gestor de Estilos bien configurado, genera esto:
/* Una sola vez, para todos los elementos con la clase .card */
.card {
background: var(--white);
border: 1px solid rgba(0,0,0,0.07);
border-radius: var(--radius);
padding: var(--space-l);
}Y en cada tarjeta, en lugar de estilos en el ID, simplemente asignas la clase .card. Una regla CSS. Doce tarjetas. Si mañana cambia el border-radius, lo cambias en un sitio y se aplica en todas partes.
Qué tiene el Gestor de Estilos y para qué sirve cada parte
Variables CSS
El corazón del sistema. Las variables te permiten definir los valores del design system en un solo lugar y referenciarlos en toda la web:
--fucsia: #E8006A;
--radius: 14px;
--radius-lg: 20px;
--space-m: clamp(1rem, ..., 1.25rem);
--text-m: clamp(1rem, ..., 1.25rem);Si el color principal cambia, lo cambias en la variable y se actualiza en toda la web. Sin buscar elemento a elemento, sin olvidarte ninguno.
Clases globales
Las clases son los bloques de construcción reutilizables. En lugar de estilos en el ID de cada elemento, defines clases como .btn-primary, .card, .s-title, .eyebrow y las aplicas a los elementos desde el panel de Bricks.
La ventaja clave: si asignas la clase .btn-primary a 50 botones de tu web y decides cambiar el color, el padding o el border-radius, lo cambias en la clase y se actualiza en los 50 botones a la vez.
Escalas tipográficas y de espaciado
El Gestor de Estilos puede generar automáticamente escalas con clamp() para tipografía y espaciado. Esto significa que los tamaños de fuente y los espaciados se adaptan fluidamente entre móvil y escritorio sin necesidad de breakpoints manuales.
En lugar de definir font-size: 24px en escritorio y font-size: 18px en móvil con un breakpoint, defines font-size: var(--text-xl) y Bricks genera automáticamente:
--text-xl: clamp(1.56rem, calc(0.009778 * (100vw - 22.5rem) + 1.56rem), 2.22rem);El tamaño fluye suavemente entre 25px en móvil y 35px en escritorio. Sin breakpoints. Sin CSS extra.
Importador de framework (Framework)
La sección Framework te permite pegar un bloque de CSS con tus clases ya definidas y que Bricks las analice e importe directamente al Gestor de Clases. Es la forma más rápida de importar un design system completo de golpe.
¿Cuánto CSS se ahorra realmente?
Para que los números sean concretos, voy a poner un ejemplo real basado en una web típica con Bricks:
| Elemento | Sin Gestor de Estilos | Con Gestor de Estilos |
|---|---|---|
| 12 tarjetas de servicio | ~48 líneas de CSS (4 propiedades × 12) | 4 líneas (1 clase compartida) |
| 8 botones primarios | ~56 líneas (7 propiedades × 8) | 7 líneas (1 clase) |
| 6 secciones con fondo | ~18 líneas (3 propiedades × 6) | 3 líneas (1 clase) |
| 20 H2 de sección | ~120 líneas (6 propiedades × 20) | 6 líneas (1 clase) |
| 15 badges de categoría | ~75 líneas (5 propiedades × 15) | 5 líneas (1 clase) |
| Total estimado | ~317 líneas | ~25 líneas |
Esto es en un ejemplo simplificado. En una web real con 20-30 páginas, la diferencia puede ser de miles de líneas de CSS.
Cómo empezar a trabajar bien desde el principio
Paso 1 — Define las variables antes de diseñar
Antes de añadir un solo elemento en el editor, abre el Gestor de Estilos y define tus variables: colores principales, grises, radios, fuentes. Son los cimientos del design system. Todo lo que construyas después hará referencia a ellas.
✓ Consejo: empieza con las variables mínimas — color principal, color de acento, negro, blanco, 4-5 grises, radius y radius-lg. Puedes ampliar después. Un sistema con 10 variables bien pensadas es más útil que uno con 100 variables que nadie recuerda.
Paso 2 — Genera las escalas tipográficas y de espaciado
En el Gestor de Estilos, ve a la sección de Tipografía y Espaciado y genera las escalas con clamp(). Configura tu base de 16px en móvil y 20px en escritorio, elige la relación de escala (Major Third 1.25 es un buen punto de partida) y pulsa «Generar variables».
Tendrás una escala de 7 pasos — desde --text-2xs hasta --text-2xl — que cubre todos los tamaños que necesitas en una web bien diseñada. Lo mismo para el espaciado.
Paso 3 — Crea las clases antes de usar los elementos
Define las clases que vas a usar antes de maquetar. Como mínimo:
.btn-primary,.btn-secondary— los botones de la web.card— la tarjeta base.section-light,.section-alt,.section-dark— los fondos de sección.eyebrow— la etiqueta pequeña sobre los títulos.s-label— el label de sección.h2,.h3— los títulos de sección
Cuando maquetes, asigna la clase al elemento en lugar de darle estilos directamente. Si un elemento necesita algo extra y puntual, añades estilos en el ID para esa excepción concreta — pero la base siempre viene de la clase.
Paso 4 — Usa el Framework para importar un sistema completo
Si ya tienes definido tu design system en un archivo CSS, puedes pegarlo en la sección Framework del Gestor de Estilos y pulsar «Analizar CSS». Bricks extrae todas las clases y variables y te permite añadirlas al gestor con un solo clic.
Esto es especialmente útil si vas a crear varias webs con el mismo design system base — importas el framework, ajustas los colores y las fuentes, y empiezas a maquetar sobre una base sólida.
¿Y si ya tengo la web hecha con estilos por ID?
Es la situación más frecuente. Llevas meses trabajando en Bricks sin el Gestor de Estilos y ahora tienes cientos de elementos con estilos aplicados directamente. ¿Qué haces?
La respuesta honesta es que no vale la pena refactorizar la web entera de golpe — es un trabajo enorme y con riesgo de romper cosas. Lo que sí puedes hacer es una transición progresiva:
- Define las variables ahora. Aunque los elementos sigan usando valores fijos, al menos tienes el sistema preparado.
- Crea las clases principales — botones, tarjetas, secciones.
- Cuando tengas que modificar un elemento existente, aprovecha para migrar ese elemento a la clase correspondiente.
- Los elementos nuevos que añadas, ya con clase desde el principio.
- Con el tiempo, la web quedará migrada de forma natural sin haber tenido que refactorizarlo todo a la vez.
ℹ️ Herramienta útil: Bricks tiene una vista de estilos no utilizados en el Gestor de Estilos que te muestra qué clases has definido pero no estás usando en ningún elemento. Úsala periódicamente para limpiar el CSS generado.
Impacto real en el rendimiento
Menos CSS no solo significa menos bytes descargados — significa menos tiempo de bloqueo del hilo principal del navegador (TBT), lo que impacta directamente en el INP y el TBT de los Core Web Vitals.
Un CSS más pequeño también es más fácil de cachear, más rápido de parsear y más sencillo de mantener. Y cuando lo combinas con WP Rocket o cualquier plugin de caché con minificación, el impacto en la velocidad de carga es inmediatamente visible en PageSpeed Insights.
Regla práctica: si el mismo conjunto de propiedades CSS aparece en más de 2 elementos, merece una clase. No esperes a tener 12 repeticiones para crear la abstracción — hazlo desde el segundo elemento.
Una inversión de tiempo que se recupera en el primer cambio de diseño
El Gestor de Estilos de Bricks no es una funcionalidad opcional para usuarios avanzados. Es la forma correcta de trabajar con Bricks desde el principio. Si lo ignoras, estás acumulando deuda técnica en forma de CSS duplicado que tarde o temprano afectará al rendimiento de tu web y a la eficiencia de tu trabajo.
La inversión de tiempo para configurarlo bien al principio — definir variables, crear las clases base, generar las escalas — se recupera rápidamente en cada elemento que no tienes que estilizar a mano y en cada cambio que se aplica en toda la web con un solo clic.
¿Tienes una web en Bricks con problemas de rendimiento o de CSS desordenado?
Puedo hacer una auditoría técnica de tu instalación y ayudarte a organizar el design system correctamente. Cuéntame tu caso.
