Validate CSS (and SCSS, Less, SugarSS) to RSCSS conventions
npm install 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.
Install: Install [stylelint] and stylelint-rscss to your project.
``sh`
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.
`js`
// .stylelintrc
{
"extends": [
"stylelint-rscss/config"
]
}
Add a script: Add an npm script to your package.json.
`js`
// package.json
{
"scripts": {
"lint:css": "stylelint path/to/css/*/"
}
}
Run it!
`sh`
npm run lint:css
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.
You need to install stylelint globally (npm install -g stylelint) for text editor support.
`sh`
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.
Here are some valid examples according to [RSCSS] rules.
`scss>
.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:
`scss>
.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:
`scss``
h2 { }
// ✓ Bare elements can be styled.
.component-name > h2 { }
// ✓ Bare elements can be styled as elements.
.component-name > a:hover[aria-hidden="false"] { }
// ✓ Pseudo-classes and attributes are OK.
.component-name:hover > .element { }
// ✓ They're ok for components too.
See Rules for more examples.
See Rules for a detailed lint of rules and examples of how to customize stylelint-rscss.
stylelint-rscss © 2016+, Rico Sta. Cruz. Released under the [MIT] License.
Authored and maintained by Rico Sta. Cruz with help from contributors ([list][contributors]).
> ricostacruz.com ·
> GitHub @rstacruz ·
> Twitter @rstacruz
[MIT]: http://mit-license.org/
[contributors]: http://github.com/rstacruz/stylelint-rscss/contributors
[stylelint]: http://stylelint.io/
[RSCSS]: http://rscss.io/