It is absolutely important to use CSS shorthands. If you use them, your code becomes easier to read and comprehend, and the filesize of your CSS files gets noticeably smaller. CSS shorthands are correctly rendered by all major web browsers, that is why you don’t need to worry about compatibility. Let’s study the most commonly-used CSS shorthands.
1. Margin & padding. Instead of this:
h1 {
margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;
padding-top:1em;
padding-right:0;
padding-bottom:2em;
padding-left:0.5em;
}
Use this:
h1 {margin:1em 0 2em 0.5em; padding:1em 0 2em 0.5em}
2. Borders. Instead of this:
h1{
border-width: 1px;
border-style: solid;
border-color: #FFF;
}
Use this:
h1 {border:1px solid #000;}
3. Border width. Instead of this:
h1 {
border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;
}
Use this:
h1 {border-width:1px 2px 3px 4px;}
4. Background Color. Instead of this:
div {
background-color:#FFF;
background-image:url(background-pic.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
}
Use this:
div {background:#FFF url(background-pic.gif) no-repeat fixed 0 0;}
5. Fonts. Instead of this:
h1 {
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:100%;
font-family:Arial,sans-serif;
}
Use this:
h1 {font:italic small-caps bold 1em/100% Arial,sans-serif;}
6. List Style. Instead of this:
ul {
list-style-type:square;
list-style-position:inside;
list-style-image:url(pic.gif);
}
Use this:
ul {list-style:square inside url(pic.gif);}
7. Outline. Instead of this:
h1 {
outline-color:#FFF;
outline-style:solid;
outline-width:2px;
}
Use this:
h1 {outline:#f00 solid 2px;}
As you see, nothing complicated here. Feel free to post your comments and your own CSS tips and tricks.