Effective shorthand CSS techniques. Fork this gist to add more and let me know!

background.md

Case 1 - All the background details explicitly specified.

/* syntax */
background: [background-image]
            [background-position]
            [background-size]
            [background-repeat]
            [background-attachment]
            [background-origin]
            [background-clip]
            [background-color];

/* longhand */
background-image: url(background.jpg);
background-position: top center;
background-size: 200px 200px;
background-repeat: no-repeat;
background-attachment: fixed;
background-origin: padding-box;
background-clip: content-box;
background-color: red;

/* shorthand */
background: url(background.jpg)
            top center / 200px 200px
            no-repeat
            fixed
            padding-box
            content-box
            red;

border-color.md

Case 1 - Border color for all four sides is different.

/* syntax */
border-color: [border-top-color] [border-right-color] [border-bottom-color] [border-left-color];

/* longhand */
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;

/* shorthand */
border-color: #000 #c00 #00c #0c0;

Case 6.2 - Border color for (left & right) is the same.

/* longhand */
border-top-color: #000;
border-right-color: #c00;
border-bottom-color: #0c0;
border-left-color: #c00;

/* syntax */
border-color: [top] [right/left] [bottom]

/* shorthand */
border-color: #000 #c00 #0c0;

Case 6.3 - Border color for (top & bottom) and (left & right) is the same.

/* longhand */
border-top-color: #000;
border-right-color: #c00;
border-bottom-color: #000;
border-left-color: #c00;

/* syntax */
border-color: [top/bottom] [right/left]

/* shorthand */
border-color: #000 #c00;

Case 6.4 - Border color for all four sides is the same.

/* longhand */
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;

/* syntax */
border-color: [top/right/bottom/left]

/* shorthand */
border-color: #000;

border-style.md

Case 5.1 - Border style for all four sides is different.

/* longhand */
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: double;

/* syntax */
border-style: [top] [right] [bottom] [left]

/* shorthand */
border-style: solid dashed dotted double;

Case 5.2 - Border style for (left & right) side is the same.

/* longhand */
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: dashed;

/* syntax */
border-style: [top] [right/left] [bottom]

/* shorthand */
border-style: solid dashed dotted;

Case 5.3 - Border style for (left & right) and (top & bottom) side is the same.

/* longhand */
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: solid;
border-left-style: dashed;

/* syntax */
border-style: [top/bottom] [right/left]

/* shorthand */
border-style: solid dashed;

Case 5.4 - Border style for all four sides is uniform.

/* longhand */
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;

/* syntax */
border-style: [top/right/bottom/left]

/* shorthand */
border-style: solid;

border-width.md

Case 4.1 - Border width for all four sides is uniform.

/* longhand */
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;

/* syntax */
border-width: [top/right/bottom/left]

/* shorthand */
border-width: 1px;

Case 4.2 - Border width for (left & right) and (top & bottom) side is the same.

/* longhand */
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 1px;
border-left-width: 2px;

/* syntax */
border-width: [top/bottom] [right/left]

/* shorthand */
border-width: 1px 2px;

Case 4.3 - Border width for (left & right) side is same.

/* longhand */
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 2px;

/* syntax */
border-width: [top] [right/left] [bottom]

/* shorthand */
border-width: 1px 2px 3px;

Case 4.4 - Border width for all four sides is different.

/* longhand */
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;

/* syntax */
border-width: [top] [right] [bottom] [left]

/* shorthand */
border-width: 1px 2px 3px 4px;

border.md

Case 3.1 - Border width, style & color is specified.

/* defaults */
border-width: medium;
border-style: none;
border-color: <inherit the value of the color property>

/* longhand */
border-width: 1px;
border-style: solid;
border-color: #000;

/* syntax */
border: [border-width] [border-style] [border-color] (~ any order)

/* shorthand */
border: 1px solid #000;
border: 1px #000 solid;
border: solid 1px #000;
border: solid #000 1px;
border: #000 1px solid;
border: #000 solid 1px;

Note:- If any of the above three values is missing, then the default value is used.

color.md

Case 9.1 - When a color consists of three pairs of hexadecimal digits, you can omit one digit from each pair.

/* longhand */
color: #000000;
color: #336699;
color: #0099CC;

/* shorthand */
color: #000;
color: #369;
color: #09C;

font.md

Case 7.1 - Font style, variant, weight, size, line-height, family is specified.

/* longhand */
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 1em;
line-height: 140%;
font-family: "Lucida Grande", sans-serif;

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

/* shorthand */
font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

list-style.md

Case 10.1 - When list type, position and image is specified.

/* longhand */
list-style-type: square;
list-style-position: inside;
list-style-image: url(image.gif);

/* syntax */
list-style: [list-style-type] [list-style-position] [list-style-image]

/* shorthand */
list-style: square inside url(image.gif);

margin.md

Case 2.1 - Margin for all four sides is uniform.

/* longhand */
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;

/* syntax */
margin: [top/right/bottom/left]

/* shorthand */
margin: 5px;

Case 2.2 - Margin for (top & bottom) and (right & left) is the same.

/* longhand */
margin-top: 1px;
margin-right: 2px;
margin-bottom: 1px;
margin-left: 2px;

/* syntax */
margin: [top/bottom] [right/left]

/* shorthand */
margin: 1px 2px;

Case 2.3 - Margin for (right & left) is the same.

/* longhand */
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 2px;

/* syntax */
margin: [top] [right/left] [bottom]

/* shorthand */
margin: 1px 2px 3px;

Case 2.4 - Margin for all four sections is different.

/* longhand */
margin-top: 1px;
margin-right: 2px;
margin-bottom: 1px;
margin-left: 2px;

/* syntax */
margin: [top] [right] [bottom] [left]

/* shorthand */
margin: 1px 2px;

outline.md

Case 11.1 - When outline color, style and width is specified.

/* longhand */
outline-color: #f00;
outline-style: solid;
outline-width: 2px;

/* syntax */
outline: [outline-color] [outline-style] [outline-width]

/* shorthand */
outline: #f00 solid 2px;

padding.md

Case 1.1 - Padding for all four sides is uniform.

/* longhand */
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;

/* syntax */
padding: [top/right/bottom/left]

/* shorthand */
padding: 5px;

Case 1.2 - Padding for (top & bottom) and (right & left) is the same.

/* longhand */
padding-top: 1px;
padding-right: 2px;
padding-bottom: 1px;
padding-left: 2px;

/* syntax */
padding: [top/bottom] [right/left]

/* shorthand */
padding: 1px 2px;

Case 1.3 - Padding for (right & left) is the same.

/* longhand */
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 2px;

/* syntax */
padding: [top] [right/left] [bottom]

/* shorthand */
padding: 1px 2px 3px;

Case 1.4 - Padding for all four sections is different.

/* longhand */
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;

/* syntax */
padding: [top] [right] [bottom] [left]

/* shorthand */
padding: 1px 2px 3px 4px;