Clases y tokens

Los tokens de diseño y las clases convierten una página de estilos sueltos en un sistema de diseño. Los tokens guardan los valores, las clases guardan las reglas y los estilos locales se encargan de las excepciones.

Tokens de diseño

Abre la pestaña Tokens del inspector para editar los colores, las fuentes y el espaciado del sitio. Cada token se convierte en una variable CSS, y los campos de estilo muestran chips de tokens que puedes elegir en lugar de valores sueltos.

:root {
  --color-brand: #fe5900;
  --font-heading: Inter;
  --space-md: 16px;
}

• Renombra un token y se reescriben todas sus referencias en páginas, componentes, clases y otros tokens. Es un solo paso de deshacer.
• Elimina un token en uso y Malla te dice en cuántos lugares se usa; luego reemplaza cada referencia por el valor del token, para que nada pierda su estilo.

Fuentes

Los tokens de fuente eligen una fuente de Google y los pesos que necesitas. Los sitios publicados cargan solo esos pesos, con font-display: swap.

Clases

Una clase es un conjunto de estilos reutilizable y con nombre, con sus propios puntos de quiebre y estados. La barra de clases encima de las secciones del inspector lista las clases de la selección. Escribe para agregar una clase existente o crear una nueva.

1. Crea una clase

   Selecciona un elemento, escribe un nombre como card en la barra de clases y presiona Enter.

2. Dale estilo a la clase

   Asegúrate de que el destino del estilo sea la clase, no los estilos locales, y luego edita. Todos los elementos con card se actualizan.

3. Reúsala

   Agrega card a otros elementos. Usa estilos locales solo para casos realmente únicos.

Clases combinadas

Agrega una segunda clase a un elemento que ya tiene una y obtienes una clase combinada: una variación que se construye sobre su clase padre. Se compila como un selector más específico, así que sobrescribe la clase base de forma confiable sin afectar sus otros usos.

.btn { padding: 12px 20px; background: var(--color-brand); }
.btn:hover { opacity: .9; }
.btn.btn-ghost { background: transparent; }   /* combo class */

Buenas prácticas

• Pon colores, fuentes y espaciado en tokens; haz referencia a los tokens desde las clases.
• Nombra las clases por su función (card, heading-xl), no por su aspecto (orange-box).
• Usa clases combinadas para variantes (btn + btn-ghost) y componentes para estructuras repetidas.
• Las clases sin usar se dejan fuera del CSS publicado automáticamente.