Shorthand CSS and Longhand CSS

What is Shorthand CSS?

Shorthand CSS is the creation of CSS elements with minimal code while writing style files.

What is Longhand CSS?

Longhand CSS is the creation of CSS elements with long long codes while writing style files.

Shorthand CSS vs Longhand CSS

In the use of Shorthand CSS, the number of loads is reduced and the number of loads that the browser will load will also decrease, thus contributing to the performance positively.

For example, when assigning a margin property to an HTML element, margin-top: 5px, margin-right: 6px, margin-bottom: 7px, margin-left: 8px; each corner can be defined with separate CSS properties, but instead margin: 5px 6px 7px 8px; There is a shorter usage in the form of and this shorter usage is more efficient.

The use of a few CSS codes in shortening may not be seen as a big savings, but the difference will become evident as the amount of style file elements increases.

In the image below, a simple test shows the difference. One of the 2 different CSS files is a short-written style file (shorthand.css), while the other is a long-written style file (longhand.css).

While shorthand.css is 238B, longhand.css takes up 567B of the style files that perform exactly the same. The short CSS file is loaded in 16ms, while the long typed CSS file is loaded in 20ms. The file sizes in the example may be small, but this difference will increase as the number of CSS elements increases.

Note: The loading times of the files may vary with each reload, but there will still be a difference between them.

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;
}