Yes yes, I know we all love using shorthand properties wherever we can while writing our CSS, but have you ever considered about the possibilities where you were trying to get something done, set a certain property on a certain element and you would just end up seeing either no results or something totally unwanted? Well I have, a lot of times but I didn't figure it out until very recently when I was just scrolling down the YouTube homepage and I came across a video from "Kevin Powell", I believe a lot of you know him and he made a specific video on how using shorthand properties sometimes can result in unnecessary headache.
Lets get into some of the examples:
Margin:
margin: 0
As we all know it is a shorthand for:
- margin-top
- margin-right
- margin-bottom
- margin-left
In the example above if you see the code properly I intended to have a top and bottom margin of 1rem for both text fields but due to the .center class being after the .text class its properties take priority and the margin top and bottom become 0.
A possible solution is to use the individual properties:
But if you find doing this inconvenient the there is another better solution at your disposal as you can see in the example below:
Here you have now seen two new properties or maybe you are already familiar with these:
- margin-inline:
- Handles margin on the horizontal axis.
- Is a shorthand for:
- margin-inline-start
- margin-inline-end
- margin-block
- Handles margin on the vertical axis
- Is a shorthand for:
- margin-block-start
- margin-block-end
Also, padding is kind of similar shorthand property so keep in mind to use individual properties when needed.
Background:
Now, just like margin property background property is a shorthand too but it is a shorthand for a bunch of other properties which can sometimes lead to unintended results, one such situation could be when you are trying to add an image as a background but you already have another class that sets:
background: #111
This can sometimes be problematic as it will set all other individual properties to initial value. Also I won't go deep into this topic as people prefer to do things their own way and some even prefer using frameworks instead of writing their own CSS.
Here's the link to the YouTube video if you want to be evn clear about this topic:
Top comments (4)
I can think of two arguments against CSS shorthands.
The weaker argument is that lots of people don't bother learning CSS properly, so if you want to avoid clueless coworkers messing up your code, or giving up on understanding it and introducing a hack using
!important, making your CSS as idiot-proof as possible might help.A better argument could be VCS; having one property per line makes changes easier to spot in a diff, specially if you only get a line diff.
The first point is definitely weak as you said because people have their own styles of writing CSS and most people stick to some properties that they come across and try to solve everything with just those so I don't think there is any way to make your CSS idiot-proof unless you don't write CSS all along and just go for a framework.
As for the second point I agree that VCS help a lot with finding out changes but here I am talking about the times when you yourself are working on something and these scenarios occur and you just stay there staring at your screen going through the CSS or inspecting your page.
Your points are valid when working with a team but this post is about individual project scenarios.
My point about VCS applies just as much to individual projects as it does to team projects though.
Yes it does