Ahora, dale forma.

Selecciona elementos con una clase compartida.

Cuándo usarlo

Para estilos reutilizables.

Cuándo evitarlo

No uses nombres ligados al color si su propósito puede cambiar.

.tarjeta { padding: 1rem; }

Selecciona un identificador único y aporta especificidad alta.

Cuándo usarlo

Para casos realmente únicos.

Cuándo evitarlo

No lo uses en todos los estilos; clases facilitan sobrescribir.

#resultado { color: navy; }

Selecciona elementos por nombre de etiqueta.

Cuándo usarlo

Para reglas base de tipografía o controles.

Cuándo evitarlo

Evita que una regla global afecte componentes sin querer.

button { font: inherit; }

Selecciona elementos según atributos.

Cuándo usarlo

Para estados declarados en HTML.

Cuándo evitarlo

No confundas atributos con propiedades CSS.

[aria-expanded="true"] { color: blue; }

El espacio selecciona descendientes; > solo hijos directos.

Cuándo usarlo

Para acotar un componente.

Cuándo evitarlo

Cadenas muy largas crean dependencia de la estructura.

.menu > a { padding: 1rem; }

Seleccionan hermanos posteriores adyacentes o generales.

Cuándo usarlo

Para relacionar elementos al mismo nivel.

Cuándo evitarlo

No seleccionan elementos anteriores.

h2 + p { margin-top: 0; }

Estado al apuntar con ratón o dispositivo equivalente.

Cuándo usarlo

Para realimentación visual complementaria.

Cuándo evitarlo

No escondas funciones esenciales detrás del hover.

a:hover { text-decoration: underline; }

Foco que necesita indicación visible.

Cuándo usarlo

Para navegación con teclado.

Cuándo evitarlo

No elimines outline sin una alternativa visible.

button:focus-visible { outline: 3px solid blue; }

Estados de controles nativos.

Cuándo usarlo

Para reflejar selección o disponibilidad.

Cuándo evitarlo

El estilo no cambia por sí solo el estado funcional.

input:checked { accent-color: blue; }

Selecciona según posición entre hermanos.

Cuándo usarlo

Para patrones visuales repetidos.

Cuándo evitarlo

No asumas un índice estable si agregas nodos.

li:nth-child(even) { background: #eee; }

Agrupan selectores; :where tiene especificidad cero.

Cuándo usarlo

Para reglas base breves.

Cuándo evitarlo

:is conserva la especificidad más alta de sus argumentos.

:where(h1, h2, h3) { line-height: 1.2; }

Selecciona un elemento que cumple una relación con descendientes.

Cuándo usarlo

Para estados de contenedores en navegadores compatibles.

Cuándo evitarlo

Revisa soporte y no sustituyas lógica compleja por selectores frágiles.

form:has(input:invalid) { border-color: red; }

Generan cajas antes o después del contenido.

Cuándo usarlo

Para decoración no esencial.

Cuándo evitarlo

No pongas información importante solo en content.

.nota::before { content: "• "; }

Decide cómo se calculan width y height.

Cuándo usarlo

border-box facilita tamaños que incluyen padding y borde.

Cuándo evitarlo

No olvides que margin queda fuera.

* { box-sizing: border-box; }

Tamaño de la caja.

Cuándo usarlo

Cuando necesitas dimensiones explícitas.

Cuándo evitarlo

Alturas rígidas pueden cortar texto ampliado.

.foto { width: 100%; height: auto; }

Límites de anchura.

Cuándo usarlo

Para contenido legible y adaptable.

Cuándo evitarlo

Un min-width grande puede causar desbordamiento móvil.

.container { width: 100%; max-width: 70rem; }

Límites de altura.

Cuándo usarlo

Para áreas de interacción o paneles desplazables.

Cuándo evitarlo

Revisa texto grande y contenido variable.

.panel { max-height: 30rem; overflow: auto; }

Espacio externo; puede colapsar en flujo de bloques.

Cuándo usarlo

Para separar componentes.

Cuándo evitarlo

No añade fondo ni aumenta el área interna clicable.

p { margin: 0 0 1rem; }

Espacio entre contenido y borde.

Cuándo usarlo

Para aire interior y controles cómodos.

Cuándo evitarlo

No confundir con distancia entre elementos.

.tarjeta { padding: 1.5rem; }

Borde de la caja.

Cuándo usarlo

Para límites visibles.

Cuándo evitarlo

Cambiar grosor puede cambiar dimensiones si no usas border-box.

.tarjeta { border: 1px solid #ddd; }

Redondea esquinas.

Cuándo usarlo

Para dar continuidad a una interfaz.

Cuándo evitarlo

No arregla una imagen que desborda sin overflow apropiado.

.tarjeta { border-radius: 16px; }

Controla contenido que supera la caja.

Cuándo usarlo

auto crea desplazamiento cuando es necesario.

Cuándo evitarlo

hidden puede ocultar contenido o indicadores de foco.

.codigo { overflow: auto; }

Relación entre anchura y altura.

Cuándo usarlo

Para reservar espacio de videos e imágenes.

Cuándo evitarlo

Puede dejar de controlar si ambas dimensiones son rígidas.

.video { aspect-ratio: 16 / 9; }

Selecciona el modelo de presentación: block, flex, grid o none.

Cuándo usarlo

Para definir cómo se distribuyen los hijos.

Cuándo evitarlo

display:none retira también el contenido del árbol accesible.

.lista { display: grid; }

Define columnas de Grid.

Cuándo usarlo

Para distribuciones de dos dimensiones.

Cuándo evitarlo

Columnas rígidas pueden romper pantallas pequeñas.

.grid { display: grid; grid-template-columns: repeat(3, 1fr); }

Repetición, límites de pista y ajuste automático.

Cuándo usarlo

Para cuadrículas adaptables.

Cuándo evitarlo

Un mínimo mayor que el viewport desborda.

.grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

Ubica elementos en pistas.

Cuándo usarlo

Para hacer que una tarjeta abarque columnas.

Cuándo evitarlo

No cambies el orden visual a costa del orden de lectura.

.destacada { grid-column: 1 / -1; }

Espaciado entre pistas de Grid o elementos Flex.

Cuándo usarlo

Para separación uniforme.

Cuándo evitarlo

No crea espacio fuera del contenedor.

.grid { gap: 20px; }

Eje principal de un contenedor Flex.

Cuándo usarlo

Para filas o columnas de controles.

Cuándo evitarlo

column cambia el significado visual de justify-content y align-items.

.acciones { display: flex; flex-direction: row; }

Permite varias líneas Flex.

Cuándo usarlo

Para controles que deben caber en móvil.

Cuándo evitarlo

nowrap puede comprimir o desbordar los hijos.

.acciones { flex-wrap: wrap; }

Forma corta de crecimiento, reducción y base.

Cuándo usarlo

Para repartir espacio flexible.

Cuándo evitarlo

No implica que todo texto largo pueda encogerse; revisa min-width.

.campo { flex: 1 1 200px; }

Distribuye elementos en el eje principal de Flex y la cuadrícula en Grid.

Cuándo usarlo

Para centrar o repartir espacio.

Cuándo evitarlo

No siempre actúa si no hay espacio libre.

.acciones { justify-content: space-between; }

Alineación de los hijos en el eje transversal de Flex o dentro de sus áreas Grid.

Cuándo usarlo

Para centrar elementos o evitar estiramiento.

Cuándo evitarlo

stretch puede crear tarjetas altas con zonas vacías.

.grid { align-items: start; }

Selecciona posicionamiento static, relative, absolute, fixed o sticky.

Cuándo usarlo

Para casos que necesitan anclaje o superposición.

Cuándo evitarlo

No uses absolute para maquetar una página completa.

.menu { position: sticky; top: 0; }

Desplazamientos de elementos posicionados.

Cuándo usarlo

Para fijar bordes de una caja.

Cuándo evitarlo

No afectan normalmente position:static.

.aviso { position: fixed; right: 1rem; bottom: 1rem; }

Orden de apilamiento dentro de contextos.

Cuándo usarlo

Para overlays y cabeceras.

Cuándo evitarlo

Un valor enorme no escapa al contexto de apilamiento padre.

.cabecera { position: sticky; z-index: 10; }

Permite que texto fluya alrededor de una caja.

Cuándo usarlo

Para envolver imágenes en texto.

Cuándo evitarlo

Para layout general usa Grid o Flex.

img { float: left; margin-right: 1rem; }

Familia de fuentes y alternativas.

Cuándo usarlo

Para un sistema tipográfico consistente.

Cuándo evitarlo

No dependas de que una fuente remota esté disponible.

body { font-family: system-ui, sans-serif; }

Tamaño de texto.

Cuándo usarlo

Con rem o escalas adaptables para lectura.

Cuándo evitarlo

Evita tamaños demasiado pequeños o impedir zoom.

body { font-size: 1rem; }

Peso de la fuente.

Cuándo usarlo

Para jerarquía visual.

Cuándo evitarlo

No todas las fuentes contienen todos los pesos.

h1 { font-weight: 700; }

Altura de línea.

Cuándo usarlo

Para separación legible; sin unidad suele heredar mejor.

Cuándo evitarlo

Una altura muy pequeña solapa caracteres.

p { line-height: 1.7; }

Espaciado entre letras.

Cuándo usarlo

Con moderación en etiquetas cortas.

Cuándo evitarlo

Evita valores excesivos en párrafos.

.etiqueta { letter-spacing: .08em; }

Alineación del contenido en línea.

Cuándo usarlo

Para texto y elementos en línea.

Cuándo evitarlo

No centra cajas de bloque por sí solo.

h1 { text-align: center; }

Líneas decorativas del texto.

Cuándo usarlo

Para enlaces reconocibles.

Cuándo evitarlo

No retires el subrayado sin otro indicio claro.

a { text-decoration: underline; }

Color del texto y valor de currentColor.

Cuándo usarlo

Para contraste y jerarquía.

Cuándo evitarlo

No comuniques estados solo con color.

p { color: #253247; }

Fondos, imágenes y gradientes.

Cuándo usarlo

Para diferenciar superficies.

Cuándo evitarlo

Las imágenes de fondo no tienen alt; no pongas allí contenido esencial.

.hero { background: linear-gradient(120deg, #eef2ff, white); }

Transparencia de la caja completa y sus hijos.

Cuándo usarlo

Para efectos visuales complementarios.

Cuándo evitarlo

opacity:0 conserva interacción y espacio.

.suave { opacity: .7; }

Sombra de una caja.

Cuándo usarlo

Para elevación visual moderada.

Cuándo evitarlo

No sustituye límites y contraste suficientes.

.tarjeta { box-shadow: 0 8px 24px #0001; }

Ajuste de imágenes o videos dentro de una caja.

Cuándo usarlo

contain conserva todo; cover puede recortar.

Cuándo evitarlo

No cambia el archivo ni su resolución.

img { width: 200px; height: 150px; object-fit: cover; }

Transformación visual: trasladar, rotar o escalar.

Cuándo usarlo

Para animación sin cambiar el flujo normal.

Cuándo evitarlo

El espacio original permanece reservado.

.tarjeta:hover { transform: translateY(-4px); }

Interpola cambios entre valores.

Cuándo usarlo

Para cambios breves y comprensibles.

Cuándo evitarlo

No uses transition:all indiscriminadamente.

button { transition: background-color .2s; }

Animación con etapas nombradas.

Cuándo usarlo

Para comunicar actividad o cambios.

Cuándo evitarlo

Respeta prefers-reduced-motion y evita distracciones.

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.aviso { animation: aparecer .3s; }

Aplica reglas bajo condiciones.

Cuándo usarlo

Para viewport, impresión y preferencias de movimiento.

Cuándo evitarlo

No diseñes únicamente para modelos de dispositivos concretos.

@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }

Consulta dimensiones de un contenedor habilitado.

Cuándo usarlo

Para componentes adaptables a su espacio.

Cuándo evitarlo

Declara container-type y comprueba compatibilidad.

.zona { container-type: inline-size; }
@container (max-width: 400px) { .tarjeta { padding: 1rem; } }

Comprueba si el navegador reconoce una característica.

Cuándo usarlo

Para mejoras progresivas.

Cuándo evitarlo

No prueba todos los comportamientos posibles.

@supports (display: grid) { .lista { display: grid; } }

Ordena capas de la cascada.

Cuándo usarlo

Para separar base, componentes y utilidades.

Cuándo evitarlo

Las reglas normales sin capa tienen prioridad sobre reglas normales en capas.

@layer base, components;
@layer base { body { margin: 0; } }

Propiedades personalizadas que participan en la cascada.

Cuándo usarlo

Para colores, espacios y temas compartidos.

Cuándo evitarlo

Incluye fallback cuando la variable puede faltar.

:root { --color: blue; }
a { color: var(--color, navy); }

Unidades relativas a raíz, fuente, referencia o viewport.

Cuándo usarlo

Para tamaños que responden al contexto.

Cuándo evitarlo

Un porcentaje de altura necesita una referencia definida en muchos casos.

h1 { font-size: 2rem; }
main { width: 90%; }

Cálculo de valores y límites adaptables.

Cuándo usarlo

Para combinar unidades y escalas fluidas.

Cuándo evitarlo

No sustituyen todas las decisiones de layout.

h1 { font-size: clamp(2rem, 5vw, 4rem); }

Cambia la prioridad de una declaración en la cascada.

Cuándo usarlo

Para excepciones deliberadas y justificadas.

Cuándo evitarlo

No lo uses como solución rutinaria a selectores mal organizados.

[hidden] { display: none !important; }