Propiedades abreviadas de CSS más comunes

Una propiedad abreviada de CSS (shorthand) establece varias propiedades individuales (longhand) a la vez, y cualquier propiedad individual que se omita se restablece al valor predeterminado de la abreviada, lo que anula silenciosamente cualquier valor que se haya definido anteriormente en la cascada.

Si alguna vez configuraste background-size: cover y lo viste desaparecer en el momento en que se añadió una línea background: posterior, ya lo experimentaste de la peor manera. No se genera ningún error, y eso es precisamente lo que lo convierte en un problema tan difícil de rastrear. Ese comportamiento específico, no la sintaxis, es el origen de la mayoría de los errores con propiedades abreviadas. Esta referencia cubre las seis abreviadas que se usan a diario (margin, padding, border, font, background y flex), con el orden de valores, los valores requeridos y los problemas de restablecimiento que hacen que cada una falle silenciosamente.

¿Por qué una propiedad abreviada de CSS restablece otras propiedades?

Cada propiedad abreviada de CSS se expande en un conjunto fijo de propiedades individuales, y un valor que no se especifica se establece en el valor predeterminado definido por la abreviada, lo que anula cualquier valor que se haya definido para esa propiedad individual anteriormente. Escribir background: red no solo establece el color; también restablece background-image, background-position, background-size y todas las demás propiedades individuales de fondo a su valor inicial.

Por eso el error más común con propiedades abreviadas nunca es un error de sintaxis. Se trata de una abreviada posterior que restablece silenciosamente una propiedad individual configurada correctamente en otro lugar:

/* Error: la abreviada restablece background-size a auto */
.hero {
  background-size: cover;
  background: url('hero.jpg') no-repeat center;
}

/* Corrección: mantener el tamaño dentro de la abreviada */
.hero {
  background: url('hero.jpg') no-repeat center / cover;
}

Este tipo de fallo es invisible en la propia declaración y, con frecuencia, solo se manifiesta en la página renderizada. Reproducir una sesión en producción reconstruye los estilos computados reales, lo que pone en evidencia el background-size colapsado que una verificación local con recursos distintos puede pasar por alto.

margin y padding: la regla del sentido horario

margin y padding aceptan entre uno y cuatro valores en sentido horario desde arriba: top, right, bottom, left (TRBL, las consonantes de “trouble”). La cantidad de valores determina qué lados se reflejan entre sí:

.button  { padding: 12px 24px; }   /* vertical 12px, horizontal 24px */
.section { margin: 40px auto; }     /* vertical 40px, horizontal auto */

margin: 0 auto centra horizontalmente un elemento de bloque al distribuir equitativamente el espacio en línea sobrante. No tiene efecto en elementos en línea, y los elementos flex o grid se centran mediante sus propias propiedades de alineación.

border: el estilo es obligatorio

En la abreviada border, los valores de ancho, estilo y color son independientes del orden porque son de tipos distintos: 2px solid red y solid red 2px son equivalentes. Sin embargo, border-style es obligatorio: su valor inicial es none, por lo que sin un estilo definido el borde no renderiza nada, independientemente del ancho o el color.

.card { border: 1px solid #e0e0e0; }  /* se renderiza */
.card { border: 1px #e0e0e0; }        /* sin estilo → no se renderiza nada */

El ancho y el color son opcionales y recurren a sus valores predeterminados (medium y currentcolor). Definir el estilo primero por costumbre elimina esta clase de errores.

font: size y family son obligatorios

La abreviada font combina font-style, font-variant, font-weight, font-size, line-height y font-family, y tanto font-size como font-family son obligatorios. Si se omite cualquiera de los dos, toda la declaración es ignorada. El orden es estricto: style, variant y weight deben aparecer antes de font-size, y line-height solo es válido inmediatamente después de font-size, unido por una barra diagonal.

/* completo: style variant weight size/line-height family */
.text { font: italic small-caps bold 16px/1.5 'Segoe UI', sans-serif; }

/* declaración mínima válida */
.text { font: 16px Arial, sans-serif; }

/* inválido — family antes de size, se descarta silenciosamente */
.text { font: Arial 16px; }

Dado que font restablece cada componente omitido a su valor inicial, aplicarla después de haber definido, por ejemplo, font-weight en otro lugar, devolverá ese peso a normal.

background: la barra diagonal en position/size

background es la abreviada más propensa a errores. La regla que más confunde a los desarrolladores: background-size solo es válido inmediatamente después de background-position, separado por una barra diagonal (center / cover); por lo tanto, un tamaño sin una posición antes de la barra es inválido y se descarta. Esto corrige guías más antiguas que tratan background-size como si requiriera una declaración separada; pertenece a la abreviada.

La secuencia de valores canónica es: image, position / size, repeat, attachment, origin, clip, color.

/* correcto: position / size */
.panel { background: #000 url('bg.jpg') center / cover no-repeat fixed; }

/* incorrecto: size sin position antes de la barra → inválido */
.panel { background: url('bg.jpg') / cover; }

/* incorrecto: sin barra, por lo que 'cover' se interpreta como un segundo valor de position */
.panel { background: url('bg.jpg') center cover; }

El color puede ubicarse en cualquier posición dentro de la sintaxis de una sola capa, pero mantenerlo al final coincide con el orden de MDN y mejora la legibilidad.

flex: flex: 1 no es 1 1 auto

Los navegadores calculan flex: 1 como flex: 1 1 0%, no como 1 1 auto, por lo que el elemento ignora su propio ancho y tamaño de contenido al distribuir el espacio. Los navegadores usan un flex-basis de 0% cuando se proporciona un único número, aunque el texto de la especificación indica 0. Puedes confirmarlo en las DevTools abriendo la pestaña Computed y leyendo flex-basis.

.grow  { flex: 1; }          /* 1 1 0%  — crece, ignora el tamaño del contenido */
.auto  { flex: auto; }       /* 1 1 auto — crece a partir del tamaño del contenido */
.fixed { flex: 0 0 200px; }  /* pista fija de 200px, sin grow/shrink */
.none  { flex: none; }       /* 0 0 auto — se ajusta al contenido, rígido */

Usa flex: auto cuando quieras que los elementos se dimensionen a partir de su contenido, y flex: 0 0 <size> para una pista de tamaño fijo.

¿Cuáles son los errores más comunes con las propiedades abreviadas de CSS?

Cuatro patrones de fallo explican la mayoría de los errores con propiedades abreviadas. Cada uno es una consecuencia directa de las reglas anteriores:

1. Una abreviada posterior restablece una propiedad individual. Una sobreescritura de tema que incluye background: elimina un background-size: cover definido anteriormente. Mantén el valor dentro de la abreviada o aplica la propiedad individual después de ella.
2. Falta font-family o font-size. Toda la declaración font se descarta, sin aplicación parcial.
3. Falta border-style. Sin estilo, el valor predeterminado es none, por lo que no se dibuja nada.
4. background-size sin una posición y barra diagonal. Escribe center / cover, nunca un cover aislado.

Las abreviadas de uso menos frecuente, como list-style, outline y place-items, siguen las mismas reglas de restablecimiento, pero aparecen con mucha menos frecuencia; úsalas de la misma manera una vez que las seis del uso diario sean algo natural.

El único hábito que previene casi todos estos errores: trata cada propiedad abreviada como un restablecimiento completo de su grupo de propiedades, no como un ajuste aditivo. Cuando un estilo que definiste en otro lugar desaparece, abre el panel Computed y verifica si una abreviada posterior lo sobreescribió. Casi siempre ese es el culpable.

Preguntas frecuentes

¿Cuándo debo usar propiedades abreviadas de CSS en lugar de propiedades individuales?

Usa la abreviada cuando quieras establecer la mayoría o todas las propiedades de un grupo a la vez y no tengas inconveniente en restablecer los valores omitidos a sus valores predeterminados. Usa la propiedad individual cuando necesites modificar una sola propiedad sin afectar las demás, como ajustar únicamente background-size sin alterar un background-image existente. La abreviada siempre restablece las propiedades individuales omitidas, por lo que un ajuste puntual mediante la propiedad individual evita ese efecto secundario.

¿Por qué añadir una abreviada background rompe mi background-size: cover?

Porque una abreviada background restablece todas las propiedades individuales de fondo que no se especifiquen a su valor inicial, y background-size se restablece a auto. Si background-size: cover está definido en una regla anterior y una declaración background: posterior omite el tamaño, esa abreviada posterior lo sobreescribe. La solución es escribir el tamaño dentro de la abreviada después de la posición, como center / cover, o colocar la propiedad individual background-size después de la abreviada.

¿Cuál es la diferencia entre flex: 1 y flex: auto?

Los navegadores calculan flex: 1 como 1 1 0%, lo que da un flex-basis de 0% para que el elemento ignore su propio tamaño de contenido y crezca únicamente a partir del espacio disponible. flex: auto se expande a 1 1 auto, por lo que el elemento parte de su tamaño de contenido y luego crece. Usa flex: 1 para columnas iguales independientemente del contenido, y flex: auto cuando los elementos deban dimensionarse en relación con lo que contienen.

¿Importa el orden de los valores en la abreviada border?

No, los valores de ancho, estilo y color en la abreviada border son independientes del orden porque son de tipos distintos, por lo que 2px solid red y solid red 2px son equivalentes. El único requisito indispensable es que border-style debe estar presente. Su valor inicial es none, por lo que sin una palabra clave de estilo el borde no se dibuja, independientemente del ancho o el color que se proporcionen.