Elementos HTML

Qué elementos tienen estilo sin clase

Escribe el HTML y LUZ le da estilo, sin ponerle ninguna clase. La estructura es la excepción: la maquetación de la página es tuya.

El único elemento que falta, track, recibe estilo del reproductor de vídeo y necesita su clase.

El HTML dice la variante

No hace falta una clase para distinguir un aspecto de otro cuando el HTML ya lo dice:

• Un button sin type, o con type="submit", es la acción principal. type="button" y type="reset" son la secundaria.
• aria-invalid="true" marca un campo con un error.
• disabled marca un control que no se puede usar.
• aria-current="page" marca el enlace de la página en la que estás.

Una clase añade lo que el HTML no puede decir: un enlace con aspecto de botón, los papeles de peligro y fantasma, los tamaños y las partes que necesitan su propio marcado. La ficha de cada elemento dice qué añade su clase. Un elemento con una clase luz-* toma el aspecto de su componente.

Todos los elementos, de la A a la Z

Cada elemento, su categoría y cómo le aplica estilos LUZ. Selecciona un nombre para abrir su ficha.

Elementos obsoletos y qué usar en su lugar

Los 23 elementos siguientes se excluyen deliberadamente de la referencia: están obsoletos o se han eliminado, y LUZ no aplica estilos a ninguno. Usa la alternativa indicada.

Cambiar los estilos por defecto

Toda regla que da estilo a un elemento sin clase tiene especificidad cero, así que la tuya gana sin pelea.

• Cambia los tokens. Es la forma de cambiar el aspecto de todo el sitio: colores, tipografía, espacio y radio. Copia themes/_template.css y cambia los valores. Hazlo tuyo explica cómo.
• Escribe tu propio CSS. El CSS sin capa gana a todas las capas de LUZ. No necesitas !important ni un selector más largo. Lo que no tocas se queda: si solo cambias el color de un h1, conserva el tamaño que le da LUZ.
• Usa LUZ en una región de una página que ya tiene diseño. Carga luz.conditional.css en lugar de luz.css y pon data-luz en el elemento que contiene la región. El reset y los elementos sin clase se aplican solo dentro de ella. ¿Qué nivel necesito? dice cuándo elegirla.

/* Your CSS has no layer, so it beats every layer of LUZ. */
h1 {
  font-weight: 600;
}

button {
  border-radius: 0;
}

Los tokens, tu CSS y la región funcionan juntos: los tokens cambian lo que dibuja LUZ, tu CSS tiene la última palabra y la región limita dónde dibuja LUZ.