The wiki will be unavailable from 7am until 9am on Thursday, 24 August, 2017.
Skip to end of metadata
Go to start of metadata

Syntax

We use Sass with the SCSS syntax (.scss)

Formatting

Icon

The following formatting conventions are enforced via scss-lint.

Setup instructions for scss linting in Sublime Text

 

  • Use hyphens when naming mixins, extends, classes, functions & variables

  • Use space between property and value

  • Use a blank line above a selector that has styles

  • Short hex colour codes: #000 not #000000

  • Use // for comment blocks not /* */

  • Use a space between selector and {

  • Use single quotation marks for attribute selectors and property values

  • Use only lowercase, including hex colour references

  • 0 values should always be unit-less. Mixins should be written to avoid the need to declare units.

Order

  • Use alphabetical order for declarations
  • Place @extends and @includes at the top of your declaration list
  • Place media queries directly after the declaration list
  • Place concatenated selectors second
  • Place pseudo-states and pseudo-elements third
  • Place nested elements fourth
  • Place nested classes fifth

Selectors

  • Don't use ID's for style
  • IDs used to hook in JavaScript should include a js- prefix: .js-entry-requirements
  • Avoid over-qualified selectors: h1.page-titlediv > .page-title
  • Use meaningful names: $visual-grid-color not $color or $vslgrd-clr
  • Be consistent about naming conventions for classes
  • Use ID and class names that are as short as possible but as long as necessary
  • Avoid nesting more than 3 selectors deep
  • Avoid using comma delimited selectors
  • Avoid nesting within a media query
  • Avoid over-qualifying selectors with HTML elements: .widgets not div.widgets
  • Don't concatenate selectors using Sass's parent selector (&)

Organisation

  • Use Normalize for browser rendering consistency, rather than a bespoke reset
  • Use HTML structure for ordering of selectors. Don't just put styles at the bottom of the Sass file
  • Avoid having files longer than 100 lines


References: