Here we write out our best practices and conventions regarding writing Sass: Syntactically Awesome Style Sheets.

In short it comes down to this:

  • Structure your SASS in an easy understandable component based folder structure. We have a convention for this so make sure to check it out. Its based on Roy Tomeij its a mix between BEM and SMACCS. It allows us to build a scalable and easy to use stylesheets.
  • Use a single SASS fil per component
  • Remove @imports from the individual stylesheets and added an index sass file
  • Have a single index file that includes the smaller components.
  • introduced components and modules (seperation necesary)
    • modules = for pages and big items (always prepend with .mod)
    • components = global styles .buttons /.rating etc.

What’s a component?

  • A smallest unity of css in your project such as .button and .rating etc.
  • Its usually reusable across projects and apps. By copying and setting some variables you reuse them in your modules.

What’s a module?

Its a functional reusable thing of your app, and is usually app specific. Let’s say you’re making a shopping card, you’ll probably have some .mod-shoppingcart and .mod-product

Here are some rules for modules:

  • Should reside in the ./modules/ directory, a good name is ./modules/_shoppingcart.sass and should be prefixed with _.
  • All styles are prefix with .mod- in order to prevent CSS collisions.
  • One module file should only declare one top level style, not more than one module in one file.

Text and indenting your SASS

  • Make sure to use 2 spaces as indentation.
  • Check our .editorconfig.
  • Add new lines between style rules to improve readability.
  • Use ./bin/lint for checking spacing and linting according to .editorconfig.
  • Only add comments when it really adds value.
  • Dont use comments with dividers, if you need dividers you might use want to split it up in seperate files instead.

Testing your SASS

  • Make sure it works on all current devices and all browsers.
  • Use a SASS linter in order to check for SASS best practices.
  • USe screenshot tooling to check if you dont accidently break your existing SASS.

Vars and naming conventions

  • Colors should be in vars, and color maps are encouraged
  • Common paddings should be in stuff like $pad-xl pad-s etc.