Even though CSS syntax is case-insensitive (except for variables), sharing some style conventions is a key point to make it possible for a team to efficiently collaborate.

This rule checks that all the following elements are written in lower case:

- properties
- functions
- @-rule keywords
- type selectors
- pseudo functions
- pseudo identifiers
- units
- hexadecimal values

## Noncompliant Code Example

    @CHARSET "UTF-8"; /* Noncompliant CHARSET @-rule keyword */

    .mybox {
      COLOR: blue; /* Noncompliant COLOR property*/
    }

    .mybox {
      color: RGB(255,255,255); /* Noncompliant RGB function */
    }

    A:hover {} /* Noncompliant A type selector */

    a:HOVER {} /* Noncompliant HOVER pseudo identifier */

    *:NOT(foo) {} /* Noncompliant NOT pseudo function */

    .mybox {
      width: 10PX; /* Noncompliant PX unit */
      color: #FFFFFF; /* Noncompliant #FFFFFF hexadecimal value */
    }

## Compliant Solution

    @charset "UTF-8";

    .mybox {
      color: blue;
    }

    .mybox {
      color: rgb(255,255,255);
    }

    a:hover {}

    *:not(foo) {}

    .mybox {
      width: 10px;
      color: #ffffff;
    }

## Exceptions

[begin-less]

Less interpolated properties are not checked for lowercase. For instance, the following piece of code does not raise any issue:

    .mybox {
      @{BG}-color: green;
    }

[end-less] [begin-scss]

SCSS interpolated properties are not checked for lowercase. For instance, the following piece of code does not raise any issue:

    .mybox {
      #{$BG}-color: green;
    }

[end-scss]

The following functions can be either written in lowercase or as follow:

[[functionCaseExceptions]]

## stylelint Related Rules

- property-case
- function-name-case
- at-rule-name-case
- selector-pseudo-class-case
- selector-pseudo-element-case
- selector-type-case
- unit-case
- color-hex-case