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

Ruleset / @-rule Block

• Opening curly brace should be placed on the same line as the block declaration
• Closing curly brace should be placed on its own line

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;
}

Declaration

• Property/variable, colon and value should be placed on the same line
• No whitespace between the property and the colon
• One single whitespace between the colon and the value

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 */
}

Compliant Solution

.mybox {
  color: red;
}

.mybox {
  --abc: red;
}

Important annotation

There should not be any whitespaces between ! and important.

Noncompliant Code Example

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

Compliant Solution

.mybox {
  color: red !important;
}