Aprendamos CSS
practicando.✳

Centraliza decisiones y calcula dimensiones. El botón «Paleta» de esta página cambia variables en :root.

:root { --accent: #c5f568; }
.pieza {
  color: var(--accent, lime);
  width: calc(100% - 2rem);
}

Organiza la prioridad antes de comparar especificidad. En declaraciones normales, una capa posterior gana a una anterior; las reglas sin capa ganan a las que tienen capa. Con !important se invierte ese orden.

@layer base, componentes, utilidades;
@layer base { button { color: white; } }
@layer utilidades { button { color: lime; } }

Agrupa los estados junto a su componente. El símbolo & hace referencia al selector padre.

.tarjeta {
  padding: 1rem;
  &:hover { border-color: lime; }
  & h3 { font-size: 2rem; }
}

Usa los ejes del modo de escritura en lugar de izquierda y derecha: facilita adaptar interfaces a distintos idiomas.

.contenido {
  padding-inline: 2rem;
  margin-block: 1rem;
  border-inline-start: 3px solid lime;
}

Ofrece una base funcional y activa una mejora cuando el navegador soporta una declaración.

.panel { background: #222; }
@supports (backdrop-filter: blur(12px)) {
  .panel {
    background: rgb(34 34 34 / .6);
    backdrop-filter: blur(12px);
  }
}

color-mix() mezcla colores; subgrid comparte pistas con la cuadrícula padre; las animaciones ligadas al scroll usan el desplazamiento como línea de tiempo.

color: color-mix(in oklab, lime 60%, white);
grid-template-columns: subgrid;
animation-timeline: scroll();

La compatibilidad varía por función y navegador. Consulta documentación y ofrece alternativas.