stylelint-rscss
Validate CSS (and SCSS, Less, SugarSS) to RSCSS conventions
stylelint-rscss is a plugin for stylelint to validate your code against RSCSS conventions. It supports SCSS (Sass), SugarSS and Less, as supported by stylelint.
As a stylelint plugin, it can be used with stylelint's hundreds of rules or other stylelint configs to validate other good CSS practices as well.
Quickstart guide
Install: Install stylelint and stylelint-rscss to your project.
npm install --save-dev stylelint stylelint-rscss
Configure: Create a .stylelintrc
in your project. Use the stylelint-rscss/config
configuration, which has defaults for strict RSCSS conventions.
// .stylelintrc "extends": "stylelint-rscss/config"
Add a script: Add an npm script to your package.json
.
// package.json "scripts": "lint:css": "stylelint path/to/css/**/*"
Run it!
npm run lint:css
Recommendations
These steps are not required, but are highly recommended:
- Add stylelint-config-standard as well!
- Configure your text editor to use stylelint. (See text editor support)
- Add
npm run lint:css
to your CI script.
Text editor support
You need to install stylelint globally (npm install -g stylelint
) for text editor support.
npm install -g stylelint
After that, here are the plugins I'd recommend:
- Neovim: neomake (no setup needed)
- Vim: syntastic (use the
stylelint
checker) - Atom: atom-linter + linter-stylelint
Also see stylelint's complimentary tools documentation.
Examples
Here are some valid examples according to RSCSS rules.
.component-name // ✓ Components should be two or more words, separated by dashes. .component-name > .element // ✓ Elements should be one word. Use `>` to denote markup structure. .component-name > .element.-foo // ✓ Variant classes begin with a dash (`-`). .component-name.-variant // ✓ Components can have variants. ._helper // ✓ Helpers start with an underscore (`_`).
Some cases not allowed:
.component-name .element // ✗ Use `>` to denote markup structure. .component-name.variant // ✗ Variants must begin with a dash. .componentname // ✗ Components should be two or more words. .component-name.other-component // ✗ Only one component name is allowed. .component-name > .-foo .-foo // ✗ Variants should be attached to components or elements.
Also OK:
h2 // ✓ Bare elements can be styled. .component-name > h2 // ✓ Bare elements can be styled as elements. .component-name > a:hover // ✓ Pseudo-classes and attributes are OK. .component-name:hover > .element // ✓ They're ok for components too.
See Rules for more examples.
Rules and customization
See Rules for a detailed lint of rules and examples of how to customize stylelint-rscss.
Thanks
stylelint-rscss © 2016+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).
ricostacruz.com · GitHub @rstacruz · Twitter @rstacruz