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: