DEV Community

Discussion on: 6 CSS Shorthand properties to improve your web application

View post
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