Stylesheet Standards

This document outlines a series of standards for creating stylesheets using:

• CSS
• SCSS
• LESS

General Standards

Everything should be indented using 4 spaces

Bad:

button {
  background-color: red;
  text-transform:   capitalize;
}

Good:

button {
    background-color: red;
    text-transform:   capitalize;
}

Note: A tab with the size of 4 spaces will also work.

Property values should be aligned by value

Bad:

button {
    background-color: red;
    text-transform: capitalize;
}

Good:

button {
    background-color: red;
    text-transform:   capitalize;
}

Classes and IDs should be kebab-case

Bad:

.button.button_danger {
    background-color: red;
    text-transform:   capitalize;
}

Good:

.button.button-danger {
    background-color: red;
    text-transform:   capitalize;
}

Multi-value properties should go below the property

Bad:

.button.button-danger {
    background-color: red;
    text-transform:   capitalize;
    transition:       background-color ease-in-out 150ms, color ease-in-out 150ms;
}

Good:

.button.button-danger {
    background-color: red;
    text-transform:   capitalize;
    transition:
        background-color ease-in-out 150ms,
        color ease-in-out 150ms;
}

Child classes should be prefixed

Bad:

.button.danger {
    background-color: red;
    text-transform:   capitalize;
}

Good:

.button.button-danger {
    background-color: red;
    text-transform:   capitalize;
}

Colours should be readable

• Named colours should be lowercase.
• Hex colours should be full length.
• Hex colours should be uppercase.
• RGB/RGBA colours should have spaces between parameters.

Bad:

.button.button-danger {
    background-color: RED;
    text-shadow:      0 2px 4px #ff0;
    color:            rgba(0,0,0,1); // rgb(0,0,0)
}

Good:

.button.button-danger {
    background-color: red;
    text-shadow:      0 2px 4px #FFFF00;
    color:            rgba(0, 0, 0, 1); // rgb(0, 0, 0)
}

Combinators should have spaces around them

Bad:

button>span {
	cursor: inherit;
}

Good:

button > span {
	cursor: inherit;
}

Use shorthand properties where applicable

Bad:

margin-top:    10px;
margin-bottom: 20px;
margin-left:   30px;
margin-right:  30px;

Good:

margin: 10px 30px 20px;

Note: Shorthand for margin goes clockwise starting at the top.

Do not put a unit after 0

Bad:

.button {
	padding: 0px;
}

Good:

.button {
	padding: 0;
}

Do not overuse calc

Bad:

.button-group {
    .button {
        width:  calc(100% - 10px);
        margin: 0 5px;
    }
	
    > :first-child {
        margin-left: 0;
    }
	
    > :last-child {
        margin-right: 0;
    }
}

Good:

.button-group {
    display: flex;

    .button {
        flex-grow: 1;
        margin:    0 5px;
    }
	
    > :first-child {
        margin-left: 0;
    }
	
    > :last-child {
        margin-right: 0;
    }
}

Note: flex can cover most situations where calc would be used.

LESS/SCSS

In these examples variables will be used as shown in SCSS. If you are using LESS make sure to change the syntax accordingly.

Styles should be broken up into entities and imported into a single file

Bad:

- styles/_app.scss

    * {}
    .button {}
    body {}
    .page {}

Good:

- styles/_app.scss

    @import './defaults';
    @import './controls';
    @import './containers';

- styles/defaults.scss

    * {}

- styles/controls.scss

    .button {}

- styles/containers.scss

    body {}
    .page {}

Variables should be prefixed and have the property within the name

Bad:

$variable: red;

// ...

.button {
	background-color: $variable;
}

Good:

$gobal-background-color: red;
$button-background-color: $global-background-color;

// ...

.button {
	background-color: $button-background-color;
}

Variables should be kebab-case

Bad:

$multipleWords: red;

Good:

$multiple-words: red;

Note: This reason for this is to match CSS properties, such as background-color or ease-in-out.

Variables should go into their own file

Bad:

- styles/_app.scss

    @import './controls';
    
- styles/controls.scss

    $button-background-color: red;
    
    .button {
        background-color: $button-background-color;
    }

Good:

- styles/_app.scss

    @import './_variables';
    @import './controls';

- styles/_variables.scss

    $button-background-color: red;
    
- styles/controls.scss
    
    .button {
        background: $button-background-color;
    }

Note: The variables file must be imported before anything otherwise a parse error will happen.