Read on TwitterCSS Shorthand Properties are a great way to save time and be more efficient with your code.
In fact, you probably already use them in your code and don& #39;t realise it.
Let& #39;s take a more in-depth look.
1/14
CSS Shorthand Properties https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔵" title="Blauer Kreis" aria-label="Emoji: Blauer Kreis"> CSS Shorthand Properties are a great way to save time and be more efficient with your code. In fact, you probably already use them in your code and don& #39;t realise it.Let& #39;s take a more in-depth look. https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread"> https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="Rückhand Zeigefinger nach unten" aria-label="Emoji: Rückhand Zeigefinger nach unten"> 1/14" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔵" title="Blauer Kreis" aria-label="Emoji: Blauer Kreis"> CSS Shorthand Properties https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔵" title="Blauer Kreis" aria-label="Emoji: Blauer Kreis"> CSS Shorthand Properties are a great way to save time and be more efficient with your code. In fact, you probably already use them in your code and don& #39;t realise it.Let& #39;s take a more in-depth look. https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread"> https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="Rückhand Zeigefinger nach unten" aria-label="Emoji: Rückhand Zeigefinger nach unten"> 1/14" class="img-responsive" style="max-width:100%;"/>
Shorthand properties let you set the values of multiple properties at once.
For example, background sets the values of background-color, background-image, background-repeat and background-position.
2/14
By using shorthand properties we can be more concise in our code and in most cases more readable as well.
This allows us to save time and energy, in the long run, making us more productive.
3/14
Some common examples of CSS Shorthand are:
border-radius: 10px 10px;
margin: 1rem 0.5rem;
padding: 20px 2rem 30px 2em;
Let me know your favourite shorthand property in the
4/14
While shorthand properties make us more productive, there are some edge cases we need to keep in mind when using them.
Let& #39;s now take a look at them.
5/14
Edge Case 1: A value that is not specified will be set to its initial value.
What this means, is if we don& #39;t specify a value in the shorthand, regardless if we have previously defined the value or not, it will default back to its initial value.
6/14
What this means, is if we don& #39;t specify a value in the shorthand, regardless if we have previously defined the value or not, it will default back to its initial value.
6/14
Edge Case 2: Only individual properties values can inherit.
Missing values in a shorthand deceleration are replaced by their initial or default value. This makes it impossible to allow inheritance of individual properties by omitting them in a deceleration.
7/14
Missing values in a shorthand deceleration are replaced by their initial or default value. This makes it impossible to allow inheritance of individual properties by omitting them in a deceleration.
7/14
Edge Case 2 cont:
The keyword `inherit` can only be applied to a property in whole, not on a per value basis. So if you do want to inherit a value, then you need to use the longhand property and specify `inherit`.
8/14
The keyword `inherit` can only be applied to a property in whole, not on a per value basis. So if you do want to inherit a value, then you need to use the longhand property and specify `inherit`.
8/14
Edge Case 3: Shorthand properties try not to force a specific order.
Shorthand CSS properties will try to not force a specific order. This is great for properties like `background` or `animation`, where we can specify values for those properties in any order.
9/14
Shorthand CSS properties will try to not force a specific order. This is great for properties like `background` or `animation`, where we can specify values for those properties in any order.
9/14
Edge Case 3 cont:
However, this doesn& #39;t work when the properties replaced can have identical values.
E.G: `margin`, `padding`, `border-style` and `border-radius`. In these cases, we need to pay attention to the order and how we define them.
10/14
However, this doesn& #39;t work when the properties replaced can have identical values.
E.G: `margin`, `padding`, `border-style` and `border-radius`. In these cases, we need to pay attention to the order and how we define them.
10/14
Check out these examples to see how Shorthand CSS can save us time and energy.
11/14
ExamplesCheck out these examples to see how Shorthand CSS can save us time and energy.11/14" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="5️⃣" title="Tastenkappe Ziffer 5" aria-label="Emoji: Tastenkappe Ziffer 5"> ExamplesCheck out these examples to see how Shorthand CSS can save us time and energy.11/14">
ExamplesCheck out these examples to see how Shorthand CSS can save us time and energy.11/14" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="5️⃣" title="Tastenkappe Ziffer 5" aria-label="Emoji: Tastenkappe Ziffer 5"> ExamplesCheck out these examples to see how Shorthand CSS can save us time and energy.11/14">
ExamplesCheck out these examples to see how Shorthand CSS can save us time and energy.11/14" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="5️⃣" title="Tastenkappe Ziffer 5" aria-label="Emoji: Tastenkappe Ziffer 5"> ExamplesCheck out these examples to see how Shorthand CSS can save us time and energy.11/14">
ExamplesCheck out these examples to see how Shorthand CSS can save us time and energy.11/14" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="5️⃣" title="Tastenkappe Ziffer 5" aria-label="Emoji: Tastenkappe Ziffer 5"> ExamplesCheck out these examples to see how Shorthand CSS can save us time and energy.11/14">
CSS provides us with a universal shorthand property: `all`
This property applies to every property in the document.
It can be set to 3 values: inherit, initial or unset.
12/14">https://developer.mozilla.org/en-US/doc...
If you want to read more on this topic, you can read my full-length notes on my blog at the link below:
13/14">https://conermurphy.com/blog/css-...
Thank you for reading 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🙏" title="Gefaltete Hände" aria-label="Emoji: Gefaltete Hände">
I hope you found this thread helpful, if you did please consider:
https://abs.twimg.com/emoji/v2/... draggable="false" alt="❤️" title="Rotes Herz" aria-label="Emoji: Rotes Herz"> Liking this thread
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔄" title="Pfeile abwärts und aufwärts in offenem Kreis gegen den Uhrzeigersinn" aria-label="Emoji: Pfeile abwärts und aufwärts in offenem Kreis gegen den Uhrzeigersinn"> Retweeting the first tweet in this thread so others can see it.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="👤" title="Silhouette einer Büste" aria-label="Emoji: Silhouette einer Büste"> Follow me for more content like this.
14/14
I hope you found this thread helpful, if you did please consider:
14/14
