Thread by @MrConerMurphy, CSS Shorthand Properties CSS Shorthand Properties are a great way to [...]

CSS Shorthand Properties

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't realise it.

Let's take a more in-depth look.

1/14

CSS Shorthand Properties 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't realise it.Let's take a more in-depth look. 1/14

What are Shorthand properties?

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

Why should we use them?

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

Examples

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

Edge Cases

While shorthand properties make us more productive, there are some edge cases we need to keep in mind when using them.

Let'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'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

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

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

Edge Case 3 cont:

However, this doesn'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

Examples

Check out these examples to see how Shorthand CSS can save us time and energy.

11/14

The Universal Shorthand Property

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.