CSS Shorthand

CSS Shorthand is a method to compress multiple declarations into one declaration. Two or more related declarations can be compressed to form one easily readable declaration. For example...

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

can be written as
border:1px solid blue;

In my CSS coding style manual, I feel that I have not given enough importace to this topic. I will try to remedy that in this post. Before beginning familiarize yourself with some css terminology that I will be using in this page.

Property

A style parameter that can be influenced through CSS. Eg 'font-size'.

Declaration

A property e.g. 'font-size' and a corresponding value e.g. '12pt'.

Rule

A declaration (e.g. 'font-family: helvetica') and its selector (e.g. 'h1').

Selector

A string that identifies what elements the corresponding rule applies to. A selector can either be a simple selector (e.g. 'h1') or a contextual selector (e.g. 'h1 b') which consists of several simple selectors.

See full list of standard CSS Terminology

Why use Shorthand?

Advantages

Smaller Code

The shorthand code is smaller - saving the download time of the vistor and the bandwidth of the server.

More Manageable

Smaller code means more manageable code. As this method brings all the related rules together, it easy to edit these rules.

Improved readability

In most cases(exceptions below) proper useage of shorthand improves readability. It is easier to read CSS code when all the related rules are bunched together.

Disadvantages

Decreases Readability - in some cases

I know that I have given 'Improved Readability' as one of the advantages. But one requirement for reading shorthand CSS code is that you must know the rules for writing the shorthand for that selector. Anyone can understand what this means...

margin-top:1px;
margin-bottom:3px;
margin-right:2px;
margin-left:4px;

But to understand margin:1px 2px 3px 4px; you have to know how the shorthand rule for the margin property. Is this an excuse to avoid shorthand? No - it is an excuse to learn shorthand rules!

Useage

The most commonly used shorthand properties are given below.

border

border: <border-width> || <border-style> || <color> ;

.box {
 border-width:1px;
 border-color:blue;
 border-style:solid;
}

Becomes

.box {
 border:1px solid blue;
}

font

font: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>;

p {
 font-style:italic;
 font-variant:small-caps;
 font-weight:bold;
 font-size:12px;
 line-height:14px;
 font-family:sans-serif; 
}

Becomes

p {
 font: italic small-caps bold 12px/14px sans-serif;
}

background

background:<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ;

#board {
 background-color:#666;
 background-image:url(chess.png);
 background-repeat:repeat;
 background-attachment:fixed;
 background-position:top left;
}

Becomes

#board {
 background:#666 url(chess.png) repeat fixed top left;
}

margin

margin : <width> - 1 to 4 times

body {
 margin-top:1px;
 margin-bottom:3px;
 margin-right:2px;
 margin-left:4px;
}

Becomes

body {
 margin: 1px 2px 3px 4px;/* top=1px, right=2px, bottom=3px, left=4px */
} 

The value order must be in a clockwise direction starting at the top - top, right, bottom and left.

padding

padding : <width> - 1 to 4 times

body {
 padding-top:1px;
 padding-bottom:3px;
 padding-right:2px;
 padding-left:4px;
}

Becomes

body {
 padding: 1px 2px 3px 4px; /* top=1px, right=2px, bottom=3px, left=4px */
}

Reference

• CSS Shorthand
• http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/
• http://www.dustindiaz.com/css-shorthand/

Filed Under...

• web
• development
• css