Stylelint Config

Colors

Color Hex Case

Specify hex colors in lowercase.

Rule

"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.

Rule

"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.

Rule

"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.

Rule

"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.

Rule

"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.

Rule

"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.

Rule

"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.

Rule

"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.

Rule

"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.

Rule

"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.

Rule

"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.

Rule Rule Rule Rule

"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.

Rule

"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.

Rule

"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

Rule

"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.

Rule

"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.

Rule Rule

"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.

Rule

"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.

Rule

"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.

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.

Rule

"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.

Rule

"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.

Rule Rule

"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.

Rule

"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.

Rule Rule

"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.

Rule

"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.

Rule

"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.

Rule

"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.

Rule Rule

"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.

Rule

"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.

Rule

"selector-no-id": true

Example

// Bad

#foo {
  color: #f00;
}

No Universal

Disallow the universal selector.

Rule

"selector-no-universal": true

Example

// Bad

* {
  color: #000;
}

.foo * {
  color: #000;
}

No Vendor Prefix

Disallow vendor prefixes for selectors, prefer using autoprefixer.

Rule

"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.

Rule

"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.

Rule Rule

"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

"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

"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.

Rule Rule

"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.

Rule

"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.

Rule Rule

"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.

Rule

"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.

Rule

"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.

Rule

"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 */.

Rule

"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.

Rule

"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.

Rule

"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.

Rule

"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.

Rule

"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.

Rule

"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.

Rule

"no-extra-semicolons": true

Example

// Bad

@import "x.css";
;

.foo {
  color: #fff;;
}

No Missing End Of Source Newline

Disallow missing end-of-source newlines.

Rule

"no-missing-end-of-source-newline": true

Example

//Good

a { color: pink; }
\n