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:

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