Hay dos tipos de programadores: los que escriben cuatro líneas cuando pueden escribir una, y los que descubren los shorthands y no vuelven atrás.
Un shorthand es una propiedad CSS abreviada que te permite definir múltiples propiedades relacionadas en una sola línea. Es como ordenar una pizza completa de una vez en lugar de llamar para pedir la masa, luego la salsa, luego el queso...
Imagina que quieres darle a un elemento un borde de 2 píxeles, con estilo sólido y color rojo. Sin shorthand, necesitas tres propiedades:
Tres líneas para una sola cosa. Con el shorthand border, lo reduces a esto:
El shorthand border acepta los valores en este orden: tamaño, luego estilo, luego color, separados por espacios. Una línea, mismo resultado.
Porque en proyectos reales vas a escribir cientos de reglas CSS. Los shorthands no son solo comodidad — son legibilidad. Una hoja de estilos llena de propiedades individuales es difícil de leer; una con shorthands bien usados se lee casi como prosa.
Además, hay shorthands para muchas propiedades que verás próximamente: margin, padding, font, background, transition, y más. Aprende la lógica detrás de uno y los demás se vuelven intuitivos.
Usando el shorthand border, dale al elemento con clase .mi-elemento un borde de 5px, estilo sólido y color azul.
Una línea puede contar toda la historia...