Warning Propiedad shorthand que anula un longhand anterior
Por qué declarar margin después de margin-top lo reinicia en silencio, y por qué importa el orden de declaración entre shorthand y longhand en CSS.
El validador marca una regla donde una propiedad shorthand (margin, padding, border, font, background) se declara después de una de sus propias subpropiedades longhand en el mismo bloque de regla.
Ejemplo
/* Incorrecto: margin reinicia margin-top de vuelta a 0 */
.tarjeta {
margin-top: 2rem;
margin: 1rem;
}
/* Correcto: primero el shorthand, después la anulación específica */
.tarjeta {
margin: 1rem;
margin-top: 2rem;
}Por qué importa
Una propiedad shorthand como margin no solo establece los lados que menciona — reinicia los cuatro subpropiedades longhand cada vez que se declara, incluyendo aquellas para las que nunca se escribió explícitamente un valor en ese bloque. En el ejemplo "incorrecto" de arriba, margin-top: 2rem parece que debería ganar por ser más específico, pero como margin: 1rem viene después en la misma regla, la cascada aplica las declaraciones en el orden del código fuente para especificidad igual — el margin-top: 1rem implícito del shorthand sobrescribe el explícito. Esta es una fuente común de errores del tipo "mi CSS debería funcionar pero no funciona", porque ambas declaraciones son sintaxis perfectamente válida y nada se ve obviamente mal al escanear el archivo.
Frequently asked questions
¿Esto también aplica entre bloques de regla separados, no solo dentro de uno?
Esta revisión solo mira dentro de un solo bloque de regla, donde el conflicto es inequívoco. Entre bloques separados el resultado también depende de la especificidad del selector y el orden de la hoja de estilos, que es el comportamiento normal de la cascada de CSS y no el mismo tipo de trampa dentro de un solo bloque.
¿Qué propiedades shorthand cubre esta revisión?
margin, padding, border, font y background — los shorthand que más comúnmente se mezclan con sus subpropiedades longhand en CSS escrito a mano.