Style Rules

The following document outlines a reasonable style guide for CSS development.
In the way this guide is extended from Idiomatic CSS

The chosen code format must ensure that: the code is easy to read, it minimizes the chances of accidentally introducing errors, and results in useful diffs and blames.

Tabs for indent (Why?)
Specific property order
Use one discrete selector per line in multi-selector rulesets.
Include a single space before the opening brace of a ruleset.
Include one declaration per line in a declaration block.
Use one level of indentation for each declaration.
Include a single space after the colon of a declaration.
Use lowercase and shorthand hex values, e.g., #aaa.
Use single or double quotes consistently. Preference is for double quotes,
e.g., content: "".
Quote attribute values in selectors, e.g., input[type="checkbox"].
Where allowed, avoid specifying units for zero-values, e.g., margin: 0.
Include a space after each comma in comma-separated property or function
values.
Include a semi-colon at the end of the last declaration in a declaration
block.
Place the closing brace of a ruleset in the same column as the first
character of the ruleset.
Separate each ruleset by a blank line.

Property order

The goal of ordering properties is to make it easier to scan and review styles by understanding the essence of the style by reading a few lines.

Here is a chaotic example and common problems found while reviewing:

.wrapper {
    top: 20px; /* is it absolute? fixed? You begin searching downwards */
    margin-left: 20px; /* Any other margins applied? */
    display: flex; /* How is this flexed?  searching for justify / align / flex rules */
    position: absolute; /* ah absolute */
    height: 100%;        /* and width? */
    margin-bottom: 20px;
    border-radius: 5px;  /* Is there even a border? */
    color: red;
    justify-content: center;
    margin-left: 2px;
    left: 0px;
    width: 100%;        /* and height? */
    border: 1px solid red;
}

If we organize this in buckets we can easily scan and understand the style.

.wrapper{
    position: absolute;
    top: 20px;
    left: 0;

    display: flex;
    justify-content: center;

    width: 100%;
    height: 100%;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-left: 2px;

    color: red;

    border: 1px solid red;
    border-radius: 5px; 
}

This also applies for SCSS with a few additional rules:

Always place @extend statements at the top of a declaration block.
Where possible, group @include statements at the top of a declaration block, after any @extend statements.