DEV Community

6 CSS Shorthand properties to improve your web application

Carmine Scarpitta on August 22, 2021

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

Read full post

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