Code standards: CSS

The status of this document is currently Draft | Work In Progress.

The following is our set of style guidelines for writing CSS.

1. Preprocessor

TODO: Describe use of SCSS

2. Naming

TODO: either merge with Code standards: CSS naming or link to that page here.

3. Order of selectors

Universal selectors must appear first, followed by type (tag) selectors. An extra blank line should separate these from class, attribute and ID selectors.

Selectors (and rules in general) should preferentially be added to the CSS stylesheets in the same order in which they appear in the markup files (.html, .cshtml and equivalent).

Within stylesheets, the order of selectors should be consistent (i.e. in the global scope as well as within @media selectors).

Pseudo-classes and pseudo-element selectors should appear after the main selector, if it exists.

See landing-page/primary.css @5ce0ff8c for an example of all of the above.

4. Spacing

• Indent code by four spaces. Do not use tab stops.
• Rules must be separated by a blank line.
• Do not write more than one statement per line.

5. Shorthand properties

Do not use shorthand properties.
Prefer:

font-style: bold;
font-size: 2em;
font-family: "Verdana", "Arial", sans-serif;

over font: bold 2em "Verdana, "Arial", sans-serif;.

6. Quotes

Always prefer double quotes.

Always enclose non-generic typeface identifiers in quotes. Generic font-family identifiers must not be enclosed in quotes, according to the relevant W3C rule.
Example:

font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;