Working with SASS
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 (separation necessary)
- modules = for pages and big items (always pretend with
.mod
) - components = global styles
.buttons
/.rating
etc.
- modules = for pages and big items (always pretend with
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 separate 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 accidentally break your existing SASS.
Vars and naming conventions
- Colors should be in vars, and color maps are encouraged
- Common padding’s should be in stuff like
$pad-xl
pad-s
etc.