JarCastingstylelint-config-standard
The standard shareable config for stylelint.
Extends stylelint-config-recommended.
Turns on additional rules to enforce the common stylistic conventions found within a handful of CSS styleguides, including: The Idiomatic CSS Principles, Google's CSS Style Guide, Airbnb's Styleguide, and @mdo's Code Guide.
It favours flexibility over strictness for things like multi-line lists and single-line rulesets, and tries to avoid potentially divisive rules.
Use it as is or as a foundation for your own config.
To see the rules that this config uses, please read the config itself.
Example
@import url(x.css);
@import url(y.css);
/**
* Multi-line comment
*/
.selector-1,
.selector-2,
.selector-3[type="text"] {
background: linear-gradient(#fff, rgba(0, 0, 0, 0.8));
box-sizing: border-box;
display: block;
color: #333;
}
.selector-a,
.selector-b:not(:first-child) {
padding: 10px !important;
top: calc(calc(1em * 2) / 3);
}
.selector-x { width: 10%; }
.selector-y { width: 20%; }
.selector-z { width: 30%; }
/* Single-line comment */
@media (min-width >= 60em) {
.selector {
/* Flush to parent comment */
transform: translate(1, 1) scale(3);
}
}
@media (orientation: portrait), projection and (color) {
.selector-i + .selector-ii {
background: color(rgb(0, 0, 0) lightness(50%));
font-family: helvetica, "arial black", sans-serif;
}
}
/* Flush single line comment */
@media
screen and (min-resolution: 192dpi),
screen and (min-resolution: 2dppx) {
.selector {
background-image:
repeating-linear-gradient(
-45deg,
transparent,
#fff 25px,
rgba(255, 255, 255, 1) 50px
);
margin: 10px;
margin-bottom: 5px;
box-shadow:
0 1px 1px #000,
0 1px 0 #fff,
2px 2px 1px 1px #ccc inset;
height: 10rem;
}
/* Flush nested single line comment */
.selector::after {
content: '→';
background-image: url(x.svg);
}
}
Note: the config is tested against this example, as such the example contains plenty of CSS syntax, formatting and features.
Installation
npm install stylelint-config-standard --save-dev
Usage
If you've installed stylelint-config-standard locally within your project, just set your stylelint config to:
{
"extends": "stylelint-config-standard"
}
If you've globally installed stylelint-config-standard using the -g flag, then you'll need to use the absolute path to stylelint-config-standard in your config e.g.
{
"extends": "/absolute/path/to/stylelint-config-standard"
}
Since stylelint 9.7.0, you can simply use the globally installed configuration name instead of the absolute path:
{
"extends": "stylelint-config-standard"
}
Extending the config
Simply add a "rules" key to your config, then add your overrides and additions there.
For example, to change the at-rule-no-unknown rule to use its ignoreAtRules option, change the indentation to tabs, turn off the number-leading-zero rule,and add the unit-allowed-list rule:
{
"extends": "stylelint-config-standard",
"rules": {
"at-rule-no-unknown": [
true,
{
"ignoreAtRules": ["extends", "ignores"]
}
],
"indentation": "tab",
"number-leading-zero": null,
"unit-allowed-list": ["em", "rem", "s"]
}
}
Suggested additions
stylelint-config-standard is a great foundation for your own config. You can extend it to create a tailored and much stricter config:
- Specify what quotes must be used using:
- If you use
autoprefixeryou'll want to disallow vendor prefixes using: - Control specificity using:
- Specify acceptable selector types, units, properties, functions and words in comments using:
at-rule-disallowed-listat-rule-allowed-listcolor-namedcolor-no-hexcomment-word-disallowed-listdeclaration-no-importantdeclaration-property-unit-disallowed-listdeclaration-property-unit-allowed-listdeclaration-property-value-disallowed-listdeclaration-property-value-allowed-listfunction-disallowed-listfunction-url-scheme-disallowed-listfunction-url-scheme-allowed-listfunction-allowed-listmedia-feature-name-disallowed-listmedia-feature-name-allowed-listproperty-disallowed-listproperty-allowed-listselector-attribute-operator-disallowed-listselector-attribute-operator-allowed-listselector-combinator-disallowed-listselector-combinator-allowed-listselector-max-classselector-max-attributeselector-max-combinatorsselector-max-idselector-max-pseudo-classselector-no-qualifying-typeselector-max-typeselector-max-universalselector-pseudo-class-disallowed-listselector-pseudo-class-allowed-listselector-pseudo-element-disallowed-listselector-pseudo-element-allowed-listunit-disallowed-listunit-allowed-list
- Specify acceptable naming patterns using:
- Specify a notation when there are one or more valid representations using:
- Specify what types of URLs are allowed using:
- Specify a maximum line length using:
Using the config with SugarSS syntax
The config is broadly compatible with SugarSS syntax. You will need to turn off the rules that check braces and semicolons, as so:
{
"extends": "stylelint-config-standard",
"rules": {
"block-closing-brace-empty-line-before": null,
"block-closing-brace-newline-after": null,
"block-closing-brace-newline-before": null,
"block-closing-brace-space-before": null,
"block-opening-brace-newline-after": null,
"block-opening-brace-space-after": null,
"block-opening-brace-space-before": null,
"declaration-block-semicolon-newline-after": null,
"declaration-block-semicolon-space-after": null,
"declaration-block-semicolon-space-before": null,
"declaration-block-trailing-semicolon": null
}
}
