Sign in
Log inSign up
6 CSS Shorthand properties to improve your web application

6 CSS Shorthand properties to improve your web application

Improve your web page loading speed and SEO ranking using CSS Shorthands

Carmine Scarpitta's photo
Carmine Scarpitta
·Aug 22, 2021·

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

css-intro.png

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 :astonished:: 👉 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:

CSS Background Shorthand.png

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:

CSS Border Shorthand.png

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 Font Shorthand.png

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

CSS Inset Shorthand.png

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 Padding Shorthand.png

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

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

Here is an example:

CSS Margin Shorthand.png

Conclusion

We have come to an end. :blossom: 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, hashnode @cscarpitta and on dev cscarpitta 😍

👋 🔥