Don't use shorthands in CSS

In [[CSS]] we have shorthands which makes it easier to write certain properties, for example background or margin. However, these affect more properties than what you're probably aiming for.
Instead use specific properties such as background-color or margin-left
/*
Here's an example where we want to change the background color to red.
*/

.test {
background: red;
}

/*
By using background we implicitly set all other values to initial
when we only wanted to change the background color
*/

.test {
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: red;
}

CSS Wizardry. ([[2016-12-12]]). "CSS Shorthand Syntax Considered an Anti-Pattern". https://csswizardry.com/2016/12/css-shorthand-syntax-considered-an-anti-pattern/
ID: 210427103751
Linked references
2021-06-22