Carmine Scarpitta

Posted on Aug 22, 2021

6 CSS Shorthand properties to improve your web application

#webdev #css #beginners #codenewbie

Why should I care shorthand properties? 🎈

CSS is a language used to describe how a web page should look like. With CSS we can set position, colors, fonts, layout of each element in an HTML page. 🌈

In this blog post, I will share some tips to improve your CSS code and the performance of your web app. ⚠️

🔥 🌞 🌴 🍄 🔥

There are several ways in which a CSS file can be optimized. One of the things you should care when writing your CSS code is to minimize the number of lines. 💥

There are several reasons to care about the number of code lines 😲:
👉 improve the code readability
👉 improve the loading speed of your web page
👉 improve the ranking in search engines (e.g. Google Search, Bing, ...), because ranking depends on the loading speed and optimization level of your application

🔥 🔥 🔥 🔥 🔥

An interesting tip to reduce the number of lines of code is the following:

Use CSS shorthand properties whenever possible

In this blog post I'll show you what shorthand properties are and how they can be used to optimize your CSS code.

Interested? Read on!!! 😊💻

What are shorthand properties?

Shorthand properties let you set the values of multiple other CSS properties simultaneously.

CSS supports a number of shorthand properties. In this blog post we will see the most used ones. ✈️

CSS Background Shorthand

Background property lets you set different background properties of an HTML element (e.g. a div) in a single line of CSS.

Background is a shorthand for:

background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment

So instead of having background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment defined for an HTML element, we can use a single property. 😍

Hmmm confused??? 😱 😕

A picture is worth a thousand words:

That's the trick. Thanks to background shorthand property, we have compressed 8 CSS lines into one line.

Now let's image a complex web application, with dozens of CSS files and thousands of lines per file. 😱

Definitely, this results in much smaller files, cleaner code and faster loading times for your web application. 😄

CSS Border Shorthand

The second shorthand property that I want to show you is called Border. Border shorthand is used to set the border of an HTML element.

It is a shorthand for:

border-width
border-style
border-color

Here is an example:

Three properties at one go. Not so bad!!! 😏 🔥

CSS Font Shorthand

Font shorthand is used to set the following font properties:

font-style
font-variant
font-weight
font-size/line-height
font-family

CSS Inset Shorthand

The Inset property has to do with the positioning of an HTML element. It is a shorthand for:

top
right
bottom
left

Simple and efficient! ☺️ 🌺

CSS Padding Shorthand

Padding is a way to add space around an element. More precisely it allows you to add space between the element and its border.

To completely set the padding of an HTML element, we need to set four values:

padding-top
padding-right
padding-bottom
padding-left

The meaning of these values is quite intuitive:

padding-top is the space between the element and the its border
padding-right is the space between the element and its right border
padding-bottom is the space between the element and its bottom border
padding-left is the space between the element and its left border

All these properties can be specified in a single declaration, using the padding shorthand. 🌻

The syntax is straightforward:

padding: <padding-top> <padding-right> <padding-bottom> <padding-left>

Here is an example:

CSS Margin Shorthand

Margin property is similar to padding. Margin is the space around the element, outside its borders.

To specify a margin you need to provide four different values:

margin-top is the space between the top border of the element and the other elements
margin-right is the space between the right border of the element and the other elements
margin-bottom is the space between the bottom border of the element and the other elements
margin-left is the space between the left border of the element and the other elements

The syntax is straightforward 🌹:

margin: <margin-top> <margin-right> <margin-bottom> <margin-left>

Here is an example:

Conclusion

We have come to an end. 🌼 I want to remark the following tip:

Use CSS shorthand properties whenever possible

because they help to reduce the lines of CSS code and improve readability.

Reducing the CSS file size will also improve the loading speed of our web pages, because the CSS file is smaller. This will also improve our ranking in search engine, because the search engine algorithms tend to reward the optimized web pages. 🌈 🚀

🔥 🔥 🔥 🔥 🔥

I hope I convinced you to care about lines of CSS code. 😜

If you liked this post, consider following me on Twitter @cscarpitta94 and on dev cscarpitta 😍

👋 🔥

Top comments (12)

bugb • Aug 23 '21 • Edited

In some cases shorthand is better but it is not always true, the readable code is the thing we should consider.

Example:
I. What is the code that is more readable?

p {
  margin: 6px 10px 5px 12px;
}

p {
  margin-top: 6px
  margin-right: 10px
  margin-bottom: 5px
  margin-left: 12px
}

II. Can you read them?

p {
  margin: 5px 12px 4px;
}

III. How about it?

p {
  margin: 12px 4px;
}

and even it:

p {
  margin: 5%;
}

What if newbie handle your code?
Did you make sure that you wont scratch your head everytime you read them, what if you look back at your code after months?
I am not a CSS professional but I think there are tools to minify your css.

Virginie-Villard • Aug 26 '21

I'm sorry but I'm a newbie... 2 month in a formation. I understand that we have to read it in clock sens the top first.
If 2 values, the first is top and bottom, the second is right and left, if 3 values the first is top, the second is right and left and the third is bottom.
It's really well explained I think ;)

bugb • Aug 26 '21

yes, it is up to you, there is nothing is number one, just a my little thoughts about shorthands and if you have time you can check the article gotbahn.com/stop-use-css-shorthand
(I am not affiliated with them, just Google a bit :)

Virginie-Villard • Aug 26 '21

Thx :) I'l go to read

Eduard Pochtar 👨‍💻 • Aug 23 '21

What is performance difference between using "margin" and "margin-left, margin-right" or other css properties? Did you measure it?

How do css shorthands impact page performance?
How do css shorthands impact SEO?
Do you have any research?

Why should developer care about manual code minification and micro optimisation when this can be automated?

"Shorthands are better to read" is very subjective opinion especially when order of values is not strict like in background or font.

Said Alejandro Rosas Vera • Sep 11 '21 • Edited

Shorthands are something I'd take with a grain of salt due to they're not the best choice all the time, for instance let's imagine that we have all the properties required to use the font shorthand, emm... yeah, we can use it, but... will it really improve the readibility of the code? I don't think so.

Shorthands are useful when they don't take too much values (as in background and font) because you can easily understand what a value is about (AND even with not many values available to use as in padding or margin, there could be situations where is better to use each property individually).

But what about the CSS files' size? well... there are many useful plugins available for Gulp, Webpack and many other tools that can give us a hand compressing the files (not only CSS files btw) in order to have lighter stylesheets.

Note: anyways it's always useful to know what are the values that are acceptable in a shorthand because you don't known if it'll be useful in certain situations (as I mentioned before).