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

## Exception

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

    .mybox { color: red; }

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

- A delimiter and its preceding element should be placed on the same line
- There should not be any whitespace between a delimiter and its preceding element
- There should be one single whitespace between a delimiter and its following element if they are on the same line

## 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

- block-opening-brace-newline-after
- declaration-colon-space-after
- declaration-colon-space-before
- declaration-bang-space-after
- value-list-comma-space-after
- value-list-comma-space-before
- dollar-variable-colon-space-after
- dollar-variable-colon-space-before