Stylelint Config
Colors
Color Hex Case
Specify hex colors in lowercase.
"color-hex-case": "lower"
Example
// Bad
a {
color: #FFF;
}
// Good
a {
color: #000;
}
a {
color: #fff;
}
Color Hex Length
Specify short notation for hex colors.
"color-hex-length": "short"
Example
// Bad
a {
color: #ffffff;
}
a {
color: #fffffaa;
}
// Good
a {
color: #fff;
}
a {
color: #fffa;
}
a {
color: #a4a4a4;
}
Color Named
Colors must never be named.
"color-named": "never"
Example
// Bad
a {
color: black;
}
// Good
a {
color: #000;
}
a {
color: rgb(0, 0, 0);
}
a {
color: var(--foo-color-white);
}
a {
color: $blue;
}
a {
color: @blue;
}
No Invalid Hex
Disallow invalid hex colors.
"color-no-invalid-hex": true
Example
// Bad
a {
color: #00;
}
a {
color: #fff1az;
}
a {
color: #12345aa;
}
// Good
a {
color: #000;
}
Functions
Skipped for now: http://stylelint.io/user-guide/rules/#function
Numbers
Number Leading Zero
There must never be a leading zero.
"number-leading-zero": "never"
Example
// Bad
a {
line-height: 0.5;
}
a {
transform: translate(2px, 0.4px);
}
// Good
a {
line-height: .5;
}
a {
transform: translate(2px, .4px);
}
Numbers No Trailing Zeros
Numbers must have no trailing zeros.
"number-no-trailing-zeros": true
Example
// Bad
a {
top: 1.0px;
}
a {
top: 1.01000px;
}
// Good
a {
top: 1px;
}
a {
top: 1.01px;
}
Strings
String Quotes
Strings must always be wrapped with double quotes.
"string-quotes": "double"
Example
// Bad
a {
content: 'x';
}
a[id='foo'] {
display: none;
}
// Good
a {
content: "x";
}
a[id="foo"] {
display: none;
}
Length
Length Zero No Unit
Disallow units for zero lengths.
"length-zero-no-unit": true
Example
// Bad
a {
top: 0px;
}
a {
top: 0.000em;
}
// Good
a {
top: 0;
}
Units
Unit Case
Specify units in lowercase.
"unit-case": "lower"
Example
// Bad
a {
width: 10PX;
}
a {
width: 10Px;
}
a {
width: 10PIXEL;
}
// Good
a {
width: 10px;
}
a {
width: calc(10px * 2);
}
Values
Value Keyword Case
Specify keyword values in lowercase.
"value-keyword-case": "lower"
Example
// Bad
a {
display: Block;
}
a {
display: BLOCK;
}
// Good
a {
display: block;
}
Value No Vendor Prefix
Avoid vendor prefixes for values and use autoprefixer instead.
"value-no-vendor-prefix": true
Example
// Bad
.foo {
display: -webkit-flex;
}
.foo {
max-width: -moz-max-content;
}
.foo {
background: -webkit-linear-gradient(bottom, #000, #fff);
}
// Good
.foo {
display: flex;
}
.foo {
max-width: max-content;
}
.foo { background: linear-gradient(bottom, #000, #fff); }
Value Lists
Value lists must always have a single space after the commas and be written in a single line.
"value-list-comma-newline-after": "never-multi-line",
"value-list-comma-newline-before": "never-multi-line",
"value-list-comma-space-after": "always",
"value-list-comma-space-before": "never"
Example
// Bad
a {
background-size: 100px,150px;
}
a {
background-size: 100px ,150px;
}
// Nope
a {
background-size: 100px,
150px;
}
a {
background-size: 100px
, 150px;
}
// Good
a {
background-size: 100px, 150px;
}
Shorthand Property
Shorthand properties must not have redundant values.
"shorthand-property-no-redundant-values": true
Example
// Bad
.foo {
margin: 1px 1px;
}
.foo {
margin: 1px 1px 1px 1px;
}
.foo {
padding: 1px 2px 1px;
}
.foo {
border-radius: 1px 2px 1px 2px;
}
// Good
.foo {
margin: 1px;
}
.foo {
margin: 1px 1px 1px 2px;
}
.foo {
padding: 1px 1em 1pt 1pc;
}
.foo {
border-radius: 10px / 5px;
}
Properties
Case
Properties must be specified in lowercase.
"property-case": "lower"
Example
// Bad
a {
Width: 1px
}
a {
WIDTH: 1px
}
// Good
a {
width: 1px
}
a {
animation-duration: 3s;
}
No Vendor Prefix
Properties must be specified without vendor prefixes, use autoprefixer instead
"property-no-vendor-prefix": true
Example
// Bad
a {
-webkit-animation-duration: 3s;
}
// Good
a {
animation-duration: 3s;
}
Declaration
Bangs
Important declarations should be avoid if possible but if used the bang of declarations must have white space before but not after.
"declaration-bang-space-after": "never",
"declaration-bang-space-before": "always"
Example
// Bad
a {
color: #fff ! important;
}
a {
color: #000!important;
}
// Good
a {
color: #f00 !important;
}
Colon
There must always be a single space after the colon but not before.
"declaration-colon-space-after": "always",
"declaration-colon-space-before": "never"
Example
// Bad
a {
color :#f00;
}
a {
color:#000;
}
a {
color : #fff;
}
// Good
a {
color: #000;
}
Property Value Blacklist
Blacklist of disallowed property and value pairs within declarations.
- Border: Disallow the use of the word none for borders, use 0 instead
- Transition: Disallow the use of all within transitions.
"declaration-property-value-blacklist": {
"border": ["none"],
"transition": [/all/]
}
Example
// Bad
a {
border: none;
transition: all 1s linear;
}
// Good
a {
border: 0;
transition: height 1s linear;
}
Declaration Blocks
No Duplicated Properties
Consecutive duplicated properties can be used , they can prove to be useful fallbacks for older browsers.
"declaration-block-no-duplicate-properties": [true, {
"ignore" : ["consecutive-duplicates"]
}]
Example
// Bad
p {
font-size: 16px;
font-weight: 400;
font-size: 1rem;
}
// Good
p {
font-size: 16px;
font-size: 1rem;
font-weight: 400;
}
No Ignored Properties
Avoid property values that are ignored due to another property value in the same rule.
"declaration-block-no-ignored-properties": true
Example
// Bad
a {
display: inline;
width: 100px;
}
a {
display: inline;
height: 100px;
}
a {
display: inline;
margin: 10px;
}
a {
display: block;
vertical-align: baseline;
}
a {
display: flex;
vertical-align: baseline;
}
a {
position: absolute;
vertical-align: baseline;
}
a {
float: left;
vertical-align: baseline;
}
// Good
a {
display: inline;
margin-left: 10px;
}
a {
display: inline;
margin-right: 10px;
}
a {
display: inline;
padding: 10px;
}
a {
display: inline-block;
width: 100px;
}
a {
display: table-cell;
vertical-align: baseline;
}
a {
position: relative;
vertical-align: baseline;
}
No Shorthand Property Overrides
Avoid shorthand properties that override related longhand properties.
"declaration-block-no-shorthand-property-overrides": true
Example
// Bad
a {
padding-left: 10px;
padding: 20px;
}
a {
transition-property: opacity;
transition: opacity 1s linear;
}
a {
border-top-width: 1px;
top: 0;
bottom: 3px;
border: 2px solid blue;
}
// Good
a {
padding: 10px;
padding-left: 20px;
}
a {
transition-property: opacity;
}
a {
transition: opacity 1s linear;
}
Properties Order
Prefixed properties must always be alphabetically ordered.
"declaration-block-properties-order": "alphabetical"
Example
// Bad
a {
top: 0;
color: pink;
}
a {
-moz-transform: scale(1);
transform: scale(1);
-webkit-transform: scale(1);
}
// Good
a {
color: pink;
top: 0;
}
a {
/* stylelint-disable property-no-vendor-prefix */
-moz-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
/* stylelint-enable property-no-vendor-prefix */
}
Semicolon New Line After
Require a newline and disallow whitespace after but never before the semicolons of declaration blocks.
"declaration-block-semicolon-newline-after": "always",
"declaration-block-semicolon-newline-before": "never-multi-line"
Example
// Bad
a { color: pink; top: 0; }
a {
color: pink
; top: 0;
}
// Good
a {
color: #000;
top: 0;
}
a {
color: #f00; /* end-of-line comment */
top: 0;
}
Trailing Semicolon
There must always be a trailing semicolon.
"declaration-block-trailing-semicolon": "always"
Example
// Bad
a {
color: #fff
}
a {
background: #fff;
color: #000
}
a {
@include foo
}
// Good
a {
background: #fff;
color: #000;
@include foo;
}
Blocks
Closing Brace Newline After
Require a newline before and after the closing brace of blocks.
"block-closing-brace-newline-after": ["always", {
"ignoreAtRules": ["if", "else"]
}],
"block-closing-brace-newline-before": "always"
Example
// Bad
a { color: pink; } b { color: red; }
a { color: pink;
} b { color: red; }
// Good
a { color: pink; }
b { color: red; }
No Empty
Disallow empty blocks.
"block-no-empty": true
Example
// Bad
a {}
a { }
@media print { a {} }
// Good
a {
color: #abc;
}
@media print {
a {
color: #fff;
}
}
No Single Line
Disallow single-line blocks.
"block-no-single-line": true
Example
// Bad
a,
b { color: pink; }
a { color: pink; top: 1px; }
@media print {
a { color: pink; }
}
a {
color: red;
@media print { color: pink; }
}
// Good
a {
color: pink;
}
a,
b {
color: pink;
}
@media print {
a {
color: pink;
}
}
a {
color: red;
@media print {
color: pink;
}
}
Opening Brace Space Before
Require a single space before the opening brace of blocks.
"block-opening-brace-space-before": "always"
Example
// Bad
a{
color: #f0f;
}
// Good
a {
color: #f0f;
}
Selectors
Combinator Space
Require a single before and after the combinators of selectors.
"selector-combinator-space-after": "always",
"selector-combinator-space-before": "always"
Example
// Bad
a +b {
color: #fff;
}
a>b {
color: #000;
}
// Good
a + b {
color: #fff;
}
a ~ b {
color: #fff;
}
Max Specificity
Limit the specificity of selectors.
Visit the Specificity Calculator for visual representation of selector specificity.
This rule ignores selectors with variable interpolation (#{$var}, @{var}, $(var)).
This rule ignores selectors containing the :not() or :matches() pseudo-classes.
This rule resolves nested selectors before calculating the specificity of a selector.
"selector-max-specificity": "0,4,0"
Example
// Bad
#id {
color: #000;
}
.foo .baz .bar .boo {
color: #fff;
}
.foo .baz {
& .bar span {
display: block;
}
}
.foo {
color: #f00;
&.baz .bar p {
color: #0f0;
}
}
// Good
div {
color: #fff;
}
.foo div {
color: #f00;
}
.foo div {
& .bar div a {
color: #fff;
}
}
.foo {
& .baz {
color: #fff;
}
}
.foo {
color: #fff;
& .baz div {
color: #fff;
}
}
No ID
Disallow id selectors.
"selector-no-id": true
Example
// Bad
#foo {
color: #f00;
}
No Universal
Disallow the universal selector.
"selector-no-universal": true
Example
// Bad
* {
color: #000;
}
.foo * {
color: #000;
}
No Vendor Prefix
Disallow vendor prefixes for selectors, prefer using autoprefixer.
"selector-no-vendor-prefix": true
Example
// Bad
input::-moz-placeholder {
color: eee;
}
:-webkit-full-screen a {
color: ff0;
}
// Good
input::placeholder {
color: #eee;
}
:full-screen a {
color: #ff0;
}
Pseudo Class Case
Pseudo-class selectors must be written in lowercase.
"selector-pseudo-class-case": "lower"
Example
// Bad
a:Hover
b:hOvEr,
em:HOVER {
color: #f00;
}
// Good
a:hover {
color: #f00;
}
Selector Lists
Comma Newline
Require a newline after the commas of selector lists but never before.
"selector-list-comma-newline-after": "always",
"selector-list-comma-newline-before": "never-multi-line"
Example
// Bad
a,b {
color: #fff;
}
a
, b {
color: #fff;
}
// Good
a,
b {
color: #fff;
}
Rules
Nested Empty Line Before
There must always be an empty line before rules. First nested selectors and selectors after comments will be ignored.
"rule-nested-empty-line-before": ["always", {
"except": ["first-nested"],
"ignore" : ["after-comment"]
}]
Example
// Bad
div {
a {
color: #fff;
}
b {
color: #000;
}
}
// Good
div {
a {
color: #fff;
}
b {
color: #000;
}
// No Comment
em {
color: #aaa;
}
}
Non Nested Empty Line Before
Require or disallow an empty line before non-nested rules.
If the rule is the very first node in a stylesheet then it is ignored.
"rule-non-nested-empty-line-before": "always"
Example
// Bad
a {
color: #fff;
}
b {
color: #000;
}
// Good
a {
color: #fff;
}
b {
color: #000;
}
Media Feature
Colon Space
Require a single space after but never before the colon in media features.
"media-feature-colon-space-after": "always",
"media-feature-colon-space-before": "never"
Example
// Bad
@media (min-width:600px) {
a {
color: #fff;
}
}
@media (max-width : 600px) {
a {
color: #000;
}
}
// Good
@media (min-width: 600px) {
a {
color: #fff;
}
}
No Missing Punctuation
Disallow missing punctuation for non-boolean media features.
"media-feature-no-missing-punctuation": true
Example
// Bad
@media (max-width 600px) {
a {
color: #fff;
}
}
@media (width 20em) {
a {
color: #fff;
}
}
// Good
@media (max-width: 600px) {
a {
color: #fff;
}
}
@media (width >= 20em) {
a {
color: #fff;
}
}
Range Operator Space
Require a single space before and after the range operator in media features.
"media-feature-range-operator-space-after": "always",
"media-feature-range-operator-space-before": "always"
Example
// Bad
@media (max-width>=600px) {
a {
color: #fff;
}
}
@media (max-width >=600px) {
a {
color: #fff;
}
}
// Good
@media (max-width >= 600px) {
a {
color: #fff;
}
}
At-rule
Empty Line Before
Require an empty line before at-rules.
If the at-rule is the very first node in a stylesheet then it is ignored.
"at-rule-empty-line-before": ["always", {
"except": ["first-nested"],
"ignore" : ["after-comment", "blockless-group"],
"ignoreAtRules": ["else"]
}],
Example
// Bad
a {
color: #fff;
@media (max-width >= 600px) {
color: #000;
}
}
// Good
a {
color: #fff;
@media (max-width >= 600px) {
color: #000;
}
// No Comment
@media (max-width >= 1200px) {
color: #f0f;
}
}
Name Case
At-rules names must be in lowercase.
"at-rule-name-case": "lower"
Example
// Bad
@Charset 'UTF-8';
@MEDIA (min-width: 50em) {
a {
color: #fff;
}
}
// Good
@charset 'UTF-8';
@media (min-width: 50em) {
a {
color: #fff;
}
}
Name Space After
Require a single space after at-rule names.
"at-rule-name-space-after": "always"
Example
// Bad
@charset"UTF-8";
@media(min-width: 700px) {
a {
color: #fff;
}
}
@media (min-width: 700px) {
a {
color: #fff;
}
}
@media
(min-width: 700px) {
a {
color: #fff;
}
}
// Good
@charset "UTF-8";
@import url("x.css");
@media (min-width: 700px) {
a {
color: #fff;
}
}
Comments
Whitespace Inside
Require whitespace on the inside of comment markers.
Any number of asterisks are allowed at the beginning or end of the comment. So /** comment **/ is treated the same way as /* comment */.
"comment-whitespace-inside": "always"
Example
// Bad
/*comment*/
/*comment */
/** comment**/
// Good
/* comment */
/** comment **/
/**
* comment
*/
/* comment
*/
General
Indentation
Always indent at-rules, rules, comments, declarations, inside parentheses and multi-line values by 2 spaces.
"indentation": 2
Example
// Bad
@media print {
a {
top: 10px;
}
}
@media print {
a {
top: 10px;
}
}
@media print {
a {
top: 10px;
}
}
// Good
@media print {
a {
top: 10px;
}
}
Max Empty Lines
Limit the number of adjacent empty lines to one.
"max-empty-lines": 1
Example
// Bad
a {
color: #fff;
}
b {
color: #000;
}
/*
Comment strings are also checked
So the following is a warning
*/
// Good
a {
color: #fff;
}
b {
color: #000;
}
/**
* Comment
*
* This is not a warning
*/
/*
Another Comment
Also not a warning
*/
Max Nesting Depth
Limit the allowed nesting depth to 3.
"max-nesting-depth": 3
This rule works by checking rules' and at-rules' actual "nesting depth" against your specified max. Here's how nesting depths works:
a {
& b { /* nesting depth 1 */
& .foo { /* nesting depth 2 */
@media print { /* nesting depth 3 */
& .baz { /* nesting depth 4 */
color: #f00;
}
}
}
}
}
Note that root-level at-rules will not be included in the nesting depth calculation, because most users would take for granted that root-level at-rules are "free" (because necessary). So both of the following .foo rules have a nesting depth of 2, and will therefore pass if your max is less than or equal to 2:
a {
b { /* 1 */
.foo {} /* 2 */
}
}
No Duplicate Selectors
Disallow duplicate selectors within a stylesheet.
"no-duplicate-selectors": true
Example
// Bad
.foo,
.bar,
.foo {
color: #fff;
}
.foo {}
.bar {}
.foo {}
.foo,
.bar {
color: #fff;
}
.bar,
.foo {
color: #fff;
}
// Good
.foo {
color: #000;
}
@media (min-width: 10px) {
.foo {
color: #fff;
}
}
.foo {
.foo {
color: #fff;
}
}
a b {
color: #fff;
}
a {
& b,
& c {
color: #000;
}
}
No EOL Whitespace
Disallow end-of-line whitespace.
"no-eol-whitespace": true
Example
a {
color: #f00;
}·
a {
color: #f00;
}····
/* Comment strings are also checked····
* so the following is a warning */
No Extra Semicolons
Disallow extra semicolons.
"no-extra-semicolons": true
Example
// Bad
@import "x.css";
;
.foo {
color: #fff;;
}
No Missing End Of Source Newline
Disallow missing end-of-source newlines.
"no-missing-end-of-source-newline": true
Example
//Good
a { color: pink; }
\n