Don't use shorthands in CSS

tags: [[CSS]], [[Development]]

pid: 210427103751

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". Link
Linked references
2021-06-22