Good CSS Shorthand and Bad

Good

Some CSS shorthand properties are good like padding and margin which can be simplified like so:

/*top, right, bottom, left*/
padding: 1em 2em 3.5em 4em;

/*top, right & left, bottom*/
margin: 1.5em 5em 0.5em;

/* top & bottom, right & left */
padding: 2em 4em;

The values have a standard clockwise order (top, right, bottom, left) and are easy to edit in Firebug.

Bad

font and background have a bad shorthand syntax because the order of values can vary requiring more thinking to decipher what it means.

/*The following variations produce the same result*/
background: red url(image.png) repeat top left scroll;
background: url(image.png) repeat top red left scroll;
background: scroll red repeat url(image.png) top left;

font: bold 1em/1.2em georgia,"times new roman",serif;
font: georgia,"times new roman",serif bold 1em/1.2em;
font: 1em/1.2em georgia,"times new roman",serif bold ;

Hard to change one property or hide/show in Firebug so explicit syntax should be used:

/*background: scroll red repeat url(image.png) top left;*/
background-attachment: scroll;
background-color: red;
background-repeat: repeat;
background-image: url(image.png);
background-position: top left;

/*font: bold 1em/1.2em georgia,"times new roman",serif;*/
font-weight: bold;
font-size: 1em;
line-height: 1.2em;
font-family: georgia,"times new roman",serif;