CSS Shorthand vs. Longhand – Which to Use

By . in Coding. Updated on .

Shorthand and Longhand – one is concise and the other precise. One came to existence out of the want for brevity, while the other stands firm to preserve clarity. Either way, they have their purposes, pros and cons, so to speak.

This post will shine some light on both CSS shorthand notations and longhand notations, while concluding which is best to use for which situation.

What is Shorthand Property?

Shorthand property is a property that takes the values for other sets of CSS properties. For example, we can assign a value for border-width, border-style and border-color using the border property alone.

Basically,

border: 1px solid blue;

is the same as:

border-width: 1px;
border-style: solid;
border-color: blue;

With this, we don’t have to declare individual property values separately (which is redundant, time- and space-consuming). It also resets the left-out properties in the declaration, something which can be taken advantage of.

How does it work?

Like previously mentioned, we write a set of other property values in shorthand, the order doesn’t matter if all the property values in the shorthand are of a different kind like in border. For properties with similar kinds of values like margin, order does matter. When in doubt, remember clockwise!

Now, what if we miss a property or two in the declaration? In the above example, let’s say we ignored border-style.

border: 1px blue;

We won’t be able to see the borders anymore, not because the shorthand property didn’t work but because the border-style which we left out, got the default value none. This is how that shorthand property got rendered.

border: 1px none blue;

Now let’s drop the 1px for border-width and keep the other two:

border: solid blue;

We’ll be able to see the borders, only with a thicker width and that’s because the border-width property got the default value medium.

border: medium solid blue;

This concludes it for us that when a property value is left out in a shorthand declaration, that property takes on its default value (even if it has to override any previous value assigned for the same).

If there is border-width: 1px; for an element somewhere before border: solid blue; for the same, the border width is going to be medium (the default value), not 1px.

Another thing worth mentioning is that we cannot use values like inherit, initial or unset, which are available for all the CSS properties, in shorthand notation. If we use those, the browser won’t be able to know exactly which property that value is supposed to represent in the shorthand – the entire declaration will be dropped.

The all property

There is one CSS shorthand property that can set the value for all CSS properties. CSS-wide values inherit, initial and unset are applicable to all of the properties and hence these are the only values accepted by the all property.

div {
  all: initial
}

This will make the div element ditch ALL of the CSS property values it had, and reset the default value in each of them.

⚠ Warning

Let’s not misuse the all property. The need for it may arise only in very rare circumstances, when we are not able to touch any previous CSS code of an element that we wish to apply this property to.

Note: CSS property color takes hexadecimal value with shorthand notation if the two numbers of hex value in every color channel is the same. For example, background: #445599; is same as background: #459;.

What is longhand property?

The individual properties that can be included in a shorthand property are called longhand properties. Some examples are; background-image, margin-left, animation-duration, etc.

Why should we use it?

Even though shorthand alternatives are handy, they do have a disadvantage. Remember in the beginning we saw how shorthand overrides any left out properties with their default values? This can be a problem if the reset isn’t desired.

Take the font shorthand property for example. Let’s use it in the h4 element (which has a default browser style font-weight:bold)

font: 20px "courier new";

In the above shorthand code, no value is there for the font-weight property, hence the font-weight:bold(browser default style) will be overridden by the default value font-weight:normal causing the h4 element to lose its bold style, which may not has been intended.

So, for the above example simple two longhand properties, font-size and font-family are perfect.

Also, using shorthand for assigning only one or two property values is not very useful. Why give the browser extra work to interpret every single property (including the left out ones) in the shorthand, when only one is needed to work?

Production aside, during development stage, some developers (especially beginners) may find using longhand notation a lot easier to work with than shorthand for better readability and clarity.

shorthand vs longhand

Conclusion

Nowadays with the possibility of fast coding (with the help of tools like Emmet) and minification, a high reliability on shorthand is not needed, but at the same time, it is a lot logical to type margin:0;.

The context in which we prefer our CSS notations will vary and all we have to do is figure out what notation will works best for us and when.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail