This rule is deprecated. It is now split into three dedicated rules:

Class selectors should follow a naming convention
ID selectors should follow a naming convention
Placeholder selectors should follow a naming convention

Shared coding conventions allow teams to collaborate efficiently. This rule checks that all 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.

Noncompliant Code Example

With format ^[a-z][-a-z0-9]*$:

.myBox {  /* Noncompliant: Should be 'mybox' or 'my-box' instead for example */
}

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

Compliant Solution

With format ^[a-z][-a-z0-9]*$:

.mybox {
}

.my-box {
}

Exceptions

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

.abc-#{$DEF} {
  color: green;
}