Sass

Particle makes a very clear distinction between printing and non-printing Sass in components.

Printing Sass generates actual, rendered CSS output.

This results in rendered CSS:

.thing {
  background: blue;
}

Non-printing Sass results in no CSS

This won't output any CSS:

$rando-var: 33px;
@mixin doThing() {
  background: blue;
}

There is a distinct role for each in the component system of Particle. In the button component featured above in Anatomy of a Component, note this import:

// source/_patterns/01-atoms/button/_index.js
...
import './_button.scss';
...

Looking into source/_patterns/01-atoms/button/_button.scss reveals:

@import '../../00-protons/config'; // DOES NOT OUTPUT CSS!

$btn-border-radius: 0.25rem;
@import "~bootstrap/scss/buttons"; // OUTPUTS CSS!

.custom-class {
  color: red;    // OUTPUTS CSS!
}

This approach to component styes allows sharing non-printing Sass configuration, while also ensuring our component prints its custom CSS exactly once. We can now safely @import 'atoms/button; anywhere in our other javascript components as many times as needed and there will be no duplicate CSS output for buttons!

BEM

This is not enforced, because it would be hellish to lint for... but we strongly encourage the use of BEM syntax for your markup and stylesheets.

Style Rules

Our in-house code style rules are designed for readability and avoiding specificity wars as much as possible.