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.