The Benefits of Using Shorthand CSS

• Most CSS bugs and problems are caused by an over bloated, over developed CSS file and messy HTML, so rewriting your CSS file can help squish those bugs.
• Shorthand CSS will load faster
• It’s tidier, so it’s easier to read. That way you can make alterations to it later on.

Shorter, Easier, Better

There are a bunch of techniques that everyone uses in CSS which are considered shorthand. Heck, you’ve probably used them before.

The Comma

The comma is probably one of the easiest and most used element in shorthand CSS. It allows you to apply a bunch of properties to a few classes at once (or maybe even more than a few, if you’re feeling particularly adventurous!). It’s pretty straight forward. Whereas the CSS newbie might commit such an unforgivable offence as this:

.class1 {
       font-family: Arial, Helvetica, sans-serif;
       padding: 20px;
       margin: 10px;
       color: #000;
}

.class2 {
       font-family: Arial, Helvetica, sans-serif;
       padding: 20px;
       margin: 10px;
       color: #000;
}

The CSS Master looks at this, laughing maniacally at such a foolish ploy. The better way to write this would be using a comma, seeing as they both have the same properties.

.class1, .class2 {
       font-family: Arial, Helvetica, sans-serif;
       padding: 20px;
       margin: 10px;
       color: #000;
}

As you’d expect, that applies all the properties to both class1 and class2.

More than one value

Some CSS elements (such as padding) allow you to apply them to certain sides (like padding-left or padding-right). Instead of doing something like this:

padding-top: 5px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 35px;

You can condense this into the form:

padding: 5px 15px 25px 35px;

Which I’m pretty sure you’ll agree is a lot smaller. Here are a few examples of what variations on this technique will do. This is the same for margin, as well as any property that follows this pattern.

padding: 5px 15px 25px 35px;

• Top padding is 5px.
• Right padding is 15px.
• Bottom padding is 25px.
• Left padding is 35px.

padding: 5px 15px 35px;

• Top padding is 5px.
• Right and left padding are 15px.
• Bottom padding is 35px.

padding: 5px 15px;

• Top and bottom padding are 5px.
• Right and left padding are 15px.

padding: 5px;

• All sides are 5px.

Of course, this is the basis of all shorthand CSS, which basically comes down to combining properties and values to make your CSS shorter.

Color

Color is another way to get rid of those extra bytes that aren’t needed. A common way to write color in CSS is to use a 6 digit hexadecimal code that represents the color. For instance, you probably know that white is #ffffff, and black is #000000.

CSS has an easy way for you to shorten down those pesky 6 digit codes to 3 digits. It follows a general rule. Each two digits can be represented by one digit if its a repeating digit. You can only do this however if the color has 3 pairs of repeating digits. For example, you can’t write #114322 as #1432 or #00fff1 can’t be written as #0ff1.

color: #ffffff; /* can be written as #fff */
color: #00ffff /* can be written as #0ff */
color: #112233; /* can be written as #123 */
color: #9900c; /* can be written as #90c */
color: #ff00ff /* can be written as #f0f */

On top of that, there’s a bunch of words that can be used as triggers for different colors. You can find a full list here.

Even Shorter

It’s possible to make your CSS even shorter by combining properties that are similar to each other.

Background

The background property can easily be condensed. Here’s a recap on the background properties:

	Default Value	Possible Values
background-color The color of the background	transparent	color (in rgb/hex/name) transparent inherit
background-image Set an image as the background	none	none url inherit
background-repeat In what way the background will repeat	repeat	repeat repeat-x repeat-y no-repeat inherit
background-attachment If the background moves or not	scroll	scroll inherit fixed
background-position The position you want the background in	top left	top left top center top right center left center center center right bottom left bottom center bottom right x y (i.e. 5% 10% or 5px 10px) inherit

The condensed background property looks something like this:

background: background-color background-image background-repeat background-attachment background-position;

/* So you might have something like this */

background: #fff url('image.jpg') repeat-x scroll bottom right;

Sort of similar to the way padding and margin are done right? If you leave out any properties (for instance, if you left out the background-color at the start or background-repeat in the middle, or whatever) CSS will just go to the default values for those properties. Same goes for all shorthand properties of this nature.

Border and Outline

A border is a visible line around an object. An outline is almost like a border, only it doesn’t add to the height or width of the element it’s around. The syntax for both are almost identical, except outline doesn’t have side specific properties (i.e. outline-left doesn’t exist). Direction can be any side: left, right, top and bottom.

Border Properties

A quick recap on border properties. The Default value on linked images is in italic brackets. The outline properties are exactly the same, only border is changed to outline, and the direction properties don’t exist.

	Default Value	Possible Values
border-width The width of the border	medium	thin medium thick measurement inherit
border-direction-width	medium	same as border-width
border-style The style of the border	none	none hidden dotted dashed solid double groove ridge inset outset inherit
border-direction-style	none	same as border-style
border-color The color of the border	inherit	color (rgb/hex/name) transparent inherit
border-direction-color	inherit	same as border-color

The shorthand version of this looks something like below:

border: border-width border-style border-color;

/* so you might have something like.. */

border: 1px solid #000;

/* or for that matter */

outline: 1px solid #000;

/* It's also possible to add directions to the border property (not the outline though) */
border-top: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;

Generally I’d advise using this syntax when using the border and outline property because things start to get weird when you leave stuff out for borders and outlines. Remember I said earlier that if you leave out certain properties, CSS will just set them to default? Well, things aren’t that easy with border and outline ya’ see.

/* These work */
border: dashed;
border: solid red;
border: 2px solid;

/* These don't work */
border: 6px;
border: blue;
border: 6px blue;

So the border-style is always required.

Lists

Lists are another element of CSS that can be easily shortened down

	Default Value	Possible Values
list-style-image Selects an image for the points	none	url none inherit
list-style-position Puts points inside/outside content	inside	inside outside inherit
list-style-type The type of the points	disc	Ordered List: decimal decimal-leading-zero upper-roman upper-latin upper-alpha lower-roman lower-latin lower-alpha lower-greek georgian Unordered List: circle square disc

So the shorthand way of doing all of these properties is like so:

list-style: list-style-type list-style-position list-style-image

/* So you might have.. */

list-style: decimal outside;

/* or */

list-style: outside url('image.jpg');

Fonts

Fonts are something that can take up a load of room in a CSS class, so shortening them down is pretty useful.

	Default Value	Possible Values
font-style	normal	normal italics oblique inherit
font-variant	normal	normal small-caps inherit
font-weight	normal	bold bolder light 100-900 inherit
font-size	medium	xx-small x-small small medium large x-large xx-large smaller larger size/measurement inherit
line-height	normal	normal size/measurement inherit
font-family	picked by browser/user	Example: Arial, Helvetica, sans-serif “Times New Roman”, serif

The font shorthand property is a little more tricky than the other ones we’ve mentioned so far, since it’s got a slightly different syntax.

font: font-style font-variant font-weight font-size/line-height font-family

/* So you could have something like this */

font: oblique normal bold 12px/5px Arial, Helvetica, sans-serif;

Final Words

Shorthand CSS is one of the most useful techniques around for shortening your CSS file, and on top of that, it’s really easy to use and read. There’s no reason for you not to use it, and it’ll certainly speed up your site a bit.

Where do I go from here?

• Peer into the future of CSS
• Optimizing your CSS files
• 15 Ways to Optimize Your CSS
• Shorthand CSS Cheat Sheet