Is there a rule of thumb to go by when it comes to this?
Examples:
background-color:black;
background:black;
background-image:
background:
Depending on how many properties you want to set at once… Properties like background allow you to set multiple other properties like color, url, repeat or position. If you just want to set the color then it makes sense to just use background-color and rest assured you will run into fewer conflicts and problems
1 Like
Also consider ease of troubleshooting, using dev tools, or accidentally resetting a non-shorthand property.
For example, let’s say somewhere you decide to set padding: 20px; on a div. If there is anywhere else on your site where a specific padding was used like padding-left: 18px;, this will be overwritten.
Similarly, if you were mainly concerned with changing the right padding, why set all the others? By using a shorthand property, you are actually creating default values for everything the shorthand property can set.
This means if you later change one of the regular properties, it will look as though you are overriding something that you perhaps never set in the first place.
None of that is actually a problem, but when using dev tools to browse css, it can look odd seeing so many crossed out properties.
It’s hard to explain, I don’t have a screenshot right now. But the basic idea is, if you wanted to change the top, right, and bottom margin, why use shorthand? It will force you to still pick a left margin, which may or may not effect other css in the project. Instead, set the three margins individually so as to not accidentally screw up the left margin.
I like to be fairly specific in my CSS, so as a general rule I tend to use long form and not conceal things like hidden defaults or accidentally overwrite other css.
There is no hard and fast rule though. Just purely opinion and what I like doing.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.