DEV Community

loading...
Cover image for 6 CSS Shorthand properties to improve your web application

6 CSS Shorthand properties to improve your web application

Carmine Scarpitta
・4 min read

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. 🌈

Alt Text

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:

Alt Text

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:

Alt Text

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

Alt Text

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

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

Here is an example:

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

Here is an example:
Alt Text

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 😍

πŸ‘‹ πŸ”₯

Discussion (11)

Collapse
bugb profile image
bugb • 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;
}
Enter fullscreen mode Exit fullscreen mode

vs

p {
  margin-top: 6px
  margin-right: 10px
  margin-bottom: 5px
  margin-left: 12px
}
Enter fullscreen mode Exit fullscreen mode

II. Can you read them?

p {
  margin: 5px 12px 4px;
}
Enter fullscreen mode Exit fullscreen mode

III. How about it?

p {
  margin: 12px 4px;
}
Enter fullscreen mode Exit fullscreen mode

and even it:

p {
  margin: 5%;
}
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
virginievillard profile image
Virginie-Villard

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

Collapse
bugb profile image
bugb

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 :)

Thread Thread
virginievillard profile image
Virginie-Villard

Thx :) I'l go to read

Collapse
iamfrntdv profile image
Eduard Pochtar πŸ‘¨β€πŸ’»

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.

Collapse
said_alrove profile image
Said Alejandro Rosas Vera • 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).

Collapse
mireslami800 profile image
mireslami800

very useful πŸ‘Œ and beautiful 😍
ThanksπŸ˜ŠπŸ™

Collapse
cscarpitta profile image
Carmine Scarpitta Author

Thank you so much! This means a lot to me!!! 😊πŸ”₯

I'll post regularly tips and tutorials on HTML/CSS/Javascript on weekends.

For more content like this, please feel free to follow me on Twitter (twitter.com/cscarpitta94) or dev (dev.to/cscarpitta)

Thanks again! πŸ”₯

Collapse
hmit29 profile image
hmit29

Padding-top...... its top border

Collapse
stuffsuggested profile image
niksin
Collapse
flagmans profile image
Flagmans

Didn't know about font property. Would be great if it would be possible to combine into ine line font and letter spacing too. πŸ™‚