CSS Styling guide I follow

style.css

/**
 * Based a lot on this https://github.com/necolas/idiomatic-css
 * 
 * I only differ on splitting the margin/padding from the box model
 * I usually put borders on their own as well
 *
 * I tend to sort the properties in each group alphebetically BUT
 * not for the positioning where I keep the top, right, bottom, left order we're use to.
 *
 * Last point where I differ from idiomatic-css is the shorthand hex value. I prefer having always the whole thing
 * ex: background-color: #ffffff;
 */

.bigGreenButton {
    top: 20px;  /* Where is the positioning set */
    left: 5px;
    float: right; /* if position is absolute, float is not necessary */

    display: inline-block;  /* if you float, you should use block */
    width: 200px;

    margin: -3px 14px 0 -3px; /* as soon as you have more than one margin/padding, you should group them */
    padding: 7px 12px;

    background-color: #4bad36;    
    color: #fff;

    font-family: Ubuntu, sans-serif;  /* Group everything that is related and order alphabetically */
    font-size: 17px;
    line-height: 18px;
    text-align: center;

    cursor: pointer;  /* Property that are "unique" can be merged in one group sur always ordered */
    zoom: 1;
    
    -webkit-border-radius: 4px;  /* Any styling effect and froufrou goes at the end, but still grouped together */
    -moz-border-radius: 4px;
    border-radius: 4px;

    -webkit-box-shadow:     /* Split the definitions on multiple lines if it is complex like this */
        0 4px 18px -4px rgba(115, 39, 39, 0.5), 
        inset 0 0 3px rgba(236, 236, 236, 0.1);
    -moz-box-shadow: 
        0 4px 18px -4px rgba(115, 39, 39, 0.5), 
        inset 0 0 3px rgba(236, 236, 236, 0.1);
    box-shadow: 
        0 4px 18px -4px rgba(115, 39, 39, 0.5), 
        inset 0 0 3px rgba(236, 236, 236, 0.1);

    text-shadow: 1px 1px 1px rgba(73, 73, 73, 0.55);
}