CSS Abreviado (Shorthand CSS) y CSS Extendido (Longhand CSS)

CSS abreviado es la creación de elementos CSS con un código mínimo al escribir archivos de estilo.

¿Qué es CSS extendido (Longhand CSS)?

CSS extendido es la creación de elementos CSS con códigos muy largos al escribir archivos de estilo.

CSS abreviado vs CSS extendido

Al usar CSS abreviado, se reduce la cantidad de líneas de código y, por lo tanto, disminuye la carga que el navegador debe procesar, contribuyendo positivamente al rendimiento.

Por ejemplo, al asignar la propiedad margin a un elemento HTML, se pueden definir los cuatro lados con propiedades separadas como:
margin-top: 5px; margin-right: 6px; margin-bottom: 7px; margin-left: 8px;
pero existe una forma más corta y eficiente:
margin: 5px 6px 7px 8px;

El ahorro al usar CSS abreviado puede parecer pequeño con pocas líneas, pero la diferencia se vuelve notable a medida que crece la cantidad de elementos en el archivo de estilo.

En la imagen de abajo, una prueba sencilla muestra la diferencia. Uno de los dos archivos CSS es un archivo con estilos escritos en forma abreviada (shorthand.css), mientras que el otro es un archivo con estilos escritos en forma extendida (longhand.css).

Mientras que shorthand.css ocupa 238 B, longhand.css ocupa 567 B, aun cuando ambos realizan exactamente la misma función. El archivo CSS abreviado se carga en 16 ms, mientras que el archivo CSS escrito de forma extendida se carga en 20 ms. Aunque los tamaños de archivo en este ejemplo sean pequeños, esta diferencia aumentará a medida que crezca la cantidad de elementos CSS.

Nota: Los tiempos de carga pueden variar con cada recarga, pero la diferencia entre ellos seguirá existiendo.

Margin CSS

/* Longhand CSS */

.margin {
   margin-top: 5px;
   margin-right: 6px;
   margin-bottom: 7px;
   margin-left: 8px;
}

/* Shorthand CSS */

.margin { 
   margin: 5px 6px 7px 8px;
}

Padding CSS

/* Longhand CSS */

.padding {
padding-top: 5px;
padding-right: 6px;
padding-bottom: 7px;
padding-left: 8px;
}

/* Shorthand CSS */

.padding { 
padding: 5px 6px 7px 8px;
}

Border CSS

/* Longhand CSS */

.border {
border-width: 1px;
border-style: solid;
border-color: #fff;
}

/* Shorthand CSS */

.border {border: 1px solid #fff;}

Flex CSS

/* Longhand CSS */

.flex {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;
}

/* Shorthand CSS */

.flex {
flex: 0 0 50%;
}

Transition CSS

/* Longhand CSS */

.transition {
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}

/* Shorthand CSS */

.transition {
transition: 1s all ease;
}

Overflow CSS

/* Longhand CSS */

.overflow {
overflow-x: hidden;
overflow-y: hidden;
}

/* Shorthand CSS */

.overflow {
overflow: hidden;
}