Have a question? Want to hire me? Get in touch with me now!

Top 5 CSS Shorthand Properties

CSS shorthand will let you write leaner and cleaner code, resulting in smaller file sizes, and ultimately, it will just save you time when you're writing out your page styling. Here are my top 5 shorthand properties:

1. Background.

Instead of listing thes out individually:

background-color: #ff0000;
background-image: url('images/bg.png');
background-position: top center;
background-repeat: repeat-x;
background-attachment: scroll;

try this:

background: #ff0000 url('images/bg.png') repeat-x top center;

(scroll is a default background-attachment value, so skipping it altogether is the leanest way to write this.)

bytes saved: 102.

2. Border.

Instead of listing these out individually:

border-top-width: 1px;
border-top-style: dashed;
border-top-color: #000000;
border-right-width: 1px;
border-right-style: dashed;
border-right-color: #000000;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #000000;
border-left-width: 1px;
border-left-style: dashed;
border-left-color: #000000;

You can write:

border: 1px dashed #000;

bytes saved: 308.

3. List Style.

Instead of writing these out individually:

list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.png);

You can write:

list-style: circle inside url(bullet.png);

bytes saved: 48.

4. Fonts.

Instead of writing all these out individually:

font-style: italic;
font-variant: small-caps;
font-weight: normal;
font-size: 1.2em;
line-height: 2em;
font-family: Georgia, "Times New Roman", Times, serif;

You can write:

font: italic small-caps 1.2em/2em Georgia, "Times New Roman", Times, serif;

Since font-weight is by default normal (usually), we left it out in the shorthand.

bytes saved: 87.

5. Margins/Paddings

And, probably the most commonly used and most useful shorthand is the declarations for margins and paddings. (Margins and paddings cannot be declared at the same time. They just use the same shorthand syntax.)

Instead of writing:

margin-top: 1em;
margin-right: 1em;
margin-bottom: 1em;
margin-left: 1em;

You can write:

margin: 1em;

Since all the margin values are the same, we can get away with only using one value. However, if we're using the following values:

margin-top: 1px;
margin-right: 5px;
margin-bottom: 12px;
margin-left: 10px;

you would write:

margin: 1px 5px 12px 10px;

A brief explanation: The margin shorthand declaration works clockwise, starting at the top. So we write the values as, Top, Right, Bottom, Left. Padding uses the same exact convention.

Bytes saved: 52.

Hope these tips help!

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options