CodeinWP CodeinWP

Understanding CSS Shorthand

When declaring certain CSS properties, you have the option to use either the longhand, explicit declaration of a single CSS property, or a single-line shorthand declaration that combines a number of properties.

Let’s look at how shorthand works with some common examples, and I’ll try to explain some of the quirks associated with CSS shorthand.

A Shorthand Example

Declaring a background image is quite common in CSS. A background declaration in shorthand looks like this:

.element {
  background: #fff url(../images/bg-image.png) no-repeat fixed 20px 20px;
}

To understand what’s happening in this shorthand declaration, here is the exact same CSS using longhand:

.element {
  background-color: #fff;
  background-image: url(../images/bg-image.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 20px 20px;
}

You can see already why most CSS developers prefer shorthand notation over longhand — the first example condenses five lines of CSS into one.

Simple Shorthand Declarations

Some shorthand declarations work in a very simple way. The example I showed you above with the background property is one of the more complex types (more on that below). But other shorthand declarations are quite easy to understand and work with.

The margin and padding properties are good examples of properties you’ll use often in their shorthand notation. And they’re not difficult to understand:

.element {
  padding: 20px;
}

In this example, although I’ve left out three other values, those values are assumed to be equal to the one value shown. So with this code, all four sides of the targeted element will have 20px of padding.

We can also do this:

.element {
  padding: 20px 10px;
}

In this example, we are declaring the top and right padding explicitly. The bottom and left padding, although not declared explicitly, will assume the same values as top and right — in that order. So the box will have 20px of top and bottom padding, and 10px of right and left padding.

And again, the long-hand equivalent of the example above would look like this:

.element {
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
}

Margins and CSS3’s border-radius property work exactly the same way, except with border-radius we’re dealing with corners instead of sides.

The More Complex Shorthand Declarations

Other shorthand declarations are a little more complicated, but with a few small exceptions, shouldn’t really cause you too many problems once you get the hang of them. The background shorthand declaration I showed you earlier is one example of these.

Other shorthand properties that may trip you up at times include:

  • list-style
  • font
  • border
  • outline

CSS3 features that use shorthand using the more complex style of notation include:

  • animation
  • border-image

So what is it that makes these other shorthand properties more difficult to understand? Well, because these properties accept different types of values (sometimes keywords, sometimes units, etc.), leaving out certain values in a shorthand declaration will often have unexpected results.

Here’s an example using background:

.element {
  background-color: blue;
  background: url(../images/bg-image.png) no-repeat;
}

With the code above, you would expect that the targeted element would have a non-repeating background image set over a blue background. But that will not happen unless we reverse the order of the properties. Because we’ve used background shorthand, this causes all the values associated with the background property to be reset to their initial, or default, state. In this case, the background color becomes “transparent”, overwriting the “blue”.

Avoid Getting Tripped Up

So it’s important to understand that anytime you use one of these more convoluted shorthand declarations, all omitted values associated with that shorthand declaration will be reset to their defaults.

Normally this is not a problem, because with properties associated with backgrounds, lists, padding, etc, those properties aren’t inheriting their values from parent elements. The only place where I have found this can cause headaches is in association with the font shorthand property.

That’s why I did this old screencast (which is a bit out of date now) and created this cheatsheet that discusses some of the problems you might run into when using the shorthand font property. Basically, we expect certain typographical properties to inherit from their parents. But when we use font in shorthand, all the properties associated with that declaration are reset to their initial state, thus losing that natural inheritance.

Another thing that can happen with font shorthand and some other shorthand declarations is that if you omit a mandatory value, the entire line will be ignored by the browser. This is another thing to keep in the back of your mind in case you’re scratching your head wondering why a certain CSS property isn’t having any effect.

Conclusion

Overall, I highly recommend using shorthand whenever you can. The only one that I avoid like the plague is font. I’m perfectly content to use longhand for those, and I think many feel the same way.

It does help to use longhand when you’re first starting out, to get to know each of the individual properties. But for the most part you’ll stick to shorthand once you’ve got a good handle on the syntax for the property you’re using.

12 Responses

  1. Sujumaku says:

    I completely disagree with the font shorthand. It makes a lot of sense to use. Why write:

    
    p{
     font-size:12px;
     line-height:1.625;
    font-family: Georgia, Times New Roman, Times, serif;
    font-weight:300;
    }
    

    When you can write:

    
    p{
     font:300 16px/1.625 Georgia, Times New Roman, Times, serif
    }
    

    I agree that it should be used carefully, but it’s certainly not something to avoid. Very helpful.

  2. Sujumaku says:

    Also, font does not break if you omit a certain value. It can accept more than what I wrote (you can define a font variant/style as well), but if you don’t know the right order it will break. Same goes for any shorthand, you just need to know how to use it.

    I often leave out font weight and line height. Works fine.

  3. Alla says:

    I dont understant, why don`t you include the “background-color” property in “background”, like that

    .element {background :#f00 url() no-repeat}

    • Because I was trying to illustrate what happens when you use background shorthand. I would never write it separately like I did. Maybe I’ll correct the text to point that out. Sorry for the confusion.

  4. Ana says:

    I also avoid using shorthand for background when the background-image is a gradient (or more). I have to write the gradient part five times (four times prefixed + standard syntax), I don’t like to write the other background properties five times as well.

  5. tedd says:

    I know that this is a personal preference, but I avoid using shorthand at all times. I believe longhand is far more obvious and thus requires less maintenance and helps in troubleshooting. I know there are people who want to their code to be as cryptic as possible thereby making text files shorter so that files will load quicker, but at today’s speeds this is just nonsense. You don’t save anything by making things more cryptic plus you add possible confusion to the mix in both you and others understanding your code. As with all coding, the more obvious the better.

  6. on background, while using background-size property with the short hand
    .element {
    background: url(../images/bg-image.png) no-repeat;
    background-size: 100% auto;
    }

    the lollipop browser will remove the first used background shorthand. so I suggest better to use the long hand for the background.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).