Shared coding conventions make it possible for a team to collaborate efficiently. This rule allows to check compliance with formatting standards.

Ruleset / @-rule Block

Noncompliant Code Example

.mybox
{                      /* Noncompliant: the opening curly brace should be moved to the previous line */
  color: red;
}

.mybox { color : red;  /* Noncompliant: the code following the opening curly brace should be moved to the next line */
}

.mybox {
  color: red;
} .mybox {             /* Noncompliant: the code following the closing curly brace should be moved to the next line */
  color: blue;
}

.mybox {
  color : red; }       /* Noncompliant: the closing curly brace should be moved to the next line */

Compliant Solution

.mybox {
  color: red;
}
.mybox {
  color: blue;
}

Exception

Rulesets containing one single declaration can be inlined. The following piece of code is valid:

.mybox { color: red; }

Declaration

Noncompliant Code Example

.mybox {
  color:          /* Noncompliant: value should be on the same line as property and colon */
    red;
}

.mybox {
  --abc:          /* Noncompliant: value should be on the same line as variable and colon */
    red;
}

.mybox {
  color : red;    /* Noncompliant: there shouldn't be any whitespace between the property and the colon */
}

.mybox {
  --abc : red;    /* Noncompliant: there shouldn't be any whitespace between the variable and the colon */
}

.mybox {
  color:    red;  /* Noncompliant: there should be one single whitespace between the colon and the value */
}

.mybox {
  color:red;      /* Noncompliant: there should be one single whitespace between the colon and the value */
}
[begin-scss]
.mybox {
  $abc:          /* Noncompliant: value should be on the same line as variable and colon */
    red;
}

.mybox {
  $abc : red;    /* Noncompliant: there shouldn't be any whitespace between the variable and the colon */
}[end-scss]
[begin-less]
.mybox {
  @abc:          /* Noncompliant: value should be on the same line as variable and colon */
    red;
}

.mybox {
  @abc : red;    /* Noncompliant: there shouldn't be any whitespace between the variable and the colon */
}[end-less]

Compliant Solution

.mybox {
  color: red;
}

.mybox {
  --abc: red;
}

Important flag

There should not be any whitespaces between ! and important.

Noncompliant Code Example

.mybox {
  color: red ! important; /* Noncompliant */
}

Compliant Solution

.mybox {
  color: red !important;
}

Comma/Semicolon-separated list

Noncompliant Code Example

.mybox {
  background: linear-gradient(red , yellow, blue); /* Noncompliant: Whitespace after 'red' should be removed */
}

.mybox {
  background: linear-gradient(red
                              ,              /* Noncompliant: The comma should be moved to the previous line */
                              yellow,
                              blue);
}

.foo,.bar { /* Noncompliant: A whitespace should be added after the comma */
  ...
}

Compliant Solution

.mybox {
  background: linear-gradient(red, yellow, blue);
}

.mybox {
  background: linear-gradient(red,
                              yellow,
                              blue);
}

.foo, .bar {
  ...
}

stylelint Related Rules