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