SCSS coding conventions

In order to enforce consistent conventions and avoid errors in our stylesheets, we use the mighty stylelint linter.

Rules

Presets

We use the following presets:

• stylelint-config-sass-guidelines, a config based on Sass Guidelines
• stylelint-config-standard, a standard config derived from the common rules found within a handful of CSS styleguides, including: The Idiomatic CSS Principles, GitHub’s PrimerCSS Guidelines, Google’s CSS Style Guide, Airbnb’s Styleguide, and @mdo’s Code Guide

Plugins

Furthermore, we added the stylelint-selector-bem-pattern plugin to check the validity of selectors against our BEM-style conventions. All the classes we provide should follow the .ecl-block__element--modifier pattern.

In order to enable the BEM-style validation, you have to define a component with a comment.

/** @define label */

.ecl-label {
}

.ecl-label--primary {
}

More information can be found on postcss-bem-linter‘s project.

Configuration

All the rules are made availble through our stylelint-config-ecl config. You are not supposed to override this configuration.

Automatically formats stylesheets

You can try to use stylefmt to format your stylesheets automatically. It can save you a lot of time but it can also introduce new errors.

For this reason, we don’t officially support it. Use it at your own risk.

IDE integration

Plugins for both stylelint and stylefmt are available for major editors like Atom and Sublime Text.