Shared coding conventions allow teams to collaborate efficiently. This rule checks that all class selector names match a provided regular expression.

The default regular expression only allows lowercase letters, digits and hyphens. Uppercase letters are not allowed because CSS selectors are used in HTML. As HTML is case-insensitive, it is usually written in lowercase and it may be confusing and even error-prone to add CSS selectors with uppercase letters to the HTML code.

The regular expression can be customized depending on your naming conventions. For example, if you follow BEM naming conventions, set the regular expression to ^(_)?[a-z]+-[a-z0-9-]+((_{2}|-{2})?[a-z0-9-]+)?(-{2}[a-z0-9-]+)?[a-z0-9]$.

Noncompliant Code Example

With format ^[a-z][-a-z0-9]*$: 
.myBox {  /* Noncompliant: Should be 'mybox' or 'my-box' instead for example */
  color: green;
}

.my_box {  /* Noncompliant: Should be 'mybox' or 'my-box' instead for example */
  color: green;
}

Compliant Solution

With format ^[a-z][-a-z0-9]*$: 
.mybox {
  color: green;
}

.my-box {
  color: green;
}
[begin-less]

Exceptions

Less interpolated class selectors are not checked for naming convention. For instance, the following piece of code does not raise an issue: 

.abc-@{DEF} {
  color: green;
}
[end-less] [begin-scss]

Exceptions

SCSS interpolated class selectors are not checked for naming convention. For instance, the following piece of code does not raise an issue: 

.abc-#{$DEF} {
  color: green;
}
[end-scss]

stylelint Related Rules