Polishing Your Stylesheets with Shorthand Properties

Photo by Maik Jonietz on Unsplash

Using shorthand properties in CSS is a great way to keep your stylesheets clean and manageable. They reduce line count and add flexibility in defining values. Here’s a few shorthand properties that you can start using today:


Backgrounds

The background property is a basic property with a lot of flexibility. It can be used as a shorthand property to define up to eight other properties:

  • background-color
  • background-image
  • background-position
  • background-size
  • background-repeat
  • background-attachment
  • background-origin
  • background-clip

When we use the background property, each of these properties can be defined concisely in one line:

background: color image position/size repeat origin clip attachment

Technically, you can use any combination of properties in any order you would like. However if you are using multiple background-image sources and also want a background-color, the color will have to be defined last on the list. Multiple images can be defined using commas:

background: image, image position/size repeat origin clip attachment color

The background property also supports defining multiple backgrounds at once using commas for each definition. Here’s an example of a background property being used to define multiple backgrounds backgrounds:

As you can see in the example, I’ve created 4 corners of a frame using a single background property. Since each corner has the same background-size and background-repeat definition, instead of writing it after each instance we can use individual properties like I have done above. This code:

background: var(bg1.jpg) Top Left/50px no-repeat,
var(bg2.jpg) Top Right/50px no-repeat,
var(bg3.jpg) Bottom Right/50px no-repeat,
var(bg4.jpg) Bottom Left/50px no-repeat,
#efefef;

is the same as this:

background: var(bg1.jpg) Top Left,
var(bg2.jpg) Top Right,
var(bg3.jpg) Bottom Right,
var(bg4.jpg) Bottom Left,
#efefef;
background-size: 50px;
background-repeat: no-repeat;

Fonts

The font property is another highly flexible tool that can be used to define up to six properties at once, including:

  • font-style
  • font-variant
  • font-weight
  • font-size*
  • line-height
  • font-family*

*When using the font property, defining font-size and font-family are required, otherwise font will not be recognized. All the other values are optional.

font can be defined like this:

font: style variant weight size/line-height family

Properties with Multiple Values

For properties that work with edges of a container such as padding, margin, border-radius, outline, and border, defining it with one value will set the value for each of the sides.

The following three lines of code:

padding: 10px;
margin: 5px;
border-radius: 15px;

Are the same as these twelve lines of code:

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;

As you can see, it’s so much easier and more efficient to write them all with one property. But what if you want more flexibility in setting different values for different sides? You can still use the shorthand properties with a 2-, 3-, or 4-value syntax:

/*
1-value syntax: [top, right, bottom, and left]
*/
padding: 10px;
/*
2-value syntax: [top, bottom] [left, right]
*/
padding: 10px 5px;
/*
3-value syntax: [top] [left, right] [bottom]
*/
padding: 10px 15px 5px;
/*
4-value syntax: [top] [right] [bottom] [left]
*/
padding: 10px 15px 5px 7px;

The same applies to all of the border and outline properties, such as border-width, border-style, border-color, outline-width, outline-style, and outline-color.

border-radius works a little different with those syntaxes since it’s dealing with corners:

2-value syntax: [top-left, bottom-right] [top-right, bottom-left]
3-value syntax: [top-left] [top-right, bottom-left] [bottom-right]
4-value syntax: [top-left] [top-right] [bottom-right] [bottom-left]

Overrides with Shorthand Properties

As I’ve mentioned above, when using a shorthand property you don’t have to define all of the values that are included in the syntax. When values are omitted, they are defined to their default value. That means if you use a shorthand property after defining an individual property, the value of the individual property will reset. Here is an example:

background-color: blue;
background: url(bg.jpg) center/cover;

In the above code, we set background-color to blue in the first line and then use the background property to define other values. Since background came after, the background-color was reset to it’s default value and is no longer blue. In order for this to work, background-color needs to be set after the shorthand property:

background: url(bg.jpg) center/cover;
background-color: blue;

In the above example, background-color will be set to blue since it’s defined after the shorthand property.