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

- selector-id-pattern