Rules

There are over one hundred built-in rules to help you:

• avoid errors
• enforce conventions

We turn on most of the rules in our standard config (✅) and many can be autofixed (🔧).

Avoid errors

You can avoid errors with these no rules.

Descending

Disallow descending things with these no-descending rules.

no-descending-specificity Disallow selectors of lower specificity from coming after overriding selectors of higher specificity.	✅

Duplicate

Disallow duplicates with these no-duplicate rules.

declaration-block-no-duplicate-custom-properties Disallow duplicate custom properties within declaration blocks.	✅
declaration-block-no-duplicate-properties Disallow duplicate properties within declaration blocks.	✅	🔧
font-family-no-duplicate-names Disallow duplicate names within font families.	✅	🔧
keyframe-block-no-duplicate-selectors Disallow duplicate selectors within keyframe blocks.	✅
no-duplicate-at-import-rules Disallow duplicate @import rules.	✅
no-duplicate-selectors Disallow duplicate selectors.	✅

Empty

Disallow empty things with these no-empty rules.

block-no-empty Disallow empty blocks.	✅
comment-no-empty Disallow empty comments.	✅
no-empty-source Disallow empty sources.	✅

Invalid

Disallow invalid syntax with these (sometimes implicit) no-invalid rules.

color-no-invalid-hex Disallow invalid hex colors.	✅
function-calc-no-unspaced-operator Disallow invalid unspaced operator within calc functions.	✅	🔧
keyframe-declaration-no-important Disallow invalid !important within keyframe declarations.	✅
media-query-no-invalid Disallow invalid media queries.	✅
named-grid-areas-no-invalid Disallow invalid named grid areas.	✅
no-invalid-double-slash-comments Disallow invalid double-slash comments.	✅
no-invalid-position-at-import-rule Disallow invalid position @import rules.	✅
string-no-newline Disallow invalid newlines within strings.	✅

Irregular

Disallow irregular things with these no-irregular rules.

no-irregular-whitespace Disallow irregular whitespace.	✅

Missing

Disallow missing things with these no-missing rules.

custom-property-no-missing-var-function Disallow missing var function for custom properties.	✅
font-family-no-missing-generic-family-keyword Disallow a missing generic family keyword within font families.	✅

Non-standard

Disallow non-standard things with these no-nonstandard rules.

function-linear-gradient-no-nonstandard-direction Disallow non-standard direction values for linear gradient functions.	✅

Overrides

Disallow overrides with these no-overrides rules.

declaration-block-no-shorthand-property-overrides Disallow shorthand properties that override related longhand properties.	✅

Unmatchable

Disallow unmatchable things with these no-unmatchable rules.

selector-anb-no-unmatchable Disallow unmatchable An+B selectors.	✅

Unknown

Disallow unknown things with these no-unknown rules.

annotation-no-unknown Disallow unknown annotations.	✅
at-rule-no-unknown Disallow unknown at-rules.	✅
declaration-property-value-no-unknown Disallow unknown values for properties within declarations.
function-no-unknown Disallow unknown functions.	✅
media-feature-name-no-unknown Disallow unknown media feature names.	✅
media-feature-name-value-no-unknown Disallow unknown values for media features.
no-unknown-animations Disallow unknown animations.
no-unknown-custom-properties Disallow unknown custom properties.
property-no-unknown Disallow unknown properties.	✅
selector-pseudo-class-no-unknown Disallow unknown pseudo-class selectors.	✅
selector-pseudo-element-no-unknown Disallow unknown pseudo-element selectors.	✅
selector-type-no-unknown Disallow unknown type selectors.	✅
unit-no-unknown Disallow unknown units.	✅

Enforce conventions

You can enforce conventions with these no and list rules. They are powerful rules for making your code consistent. You'll need to configure most of them to suit your needs.

Allowed, disallowed & required

Allow, disallow or require things with these allowed-list, disallowed-list, required-list and no rules.

At-rule

at-rule-allowed-list Specify a list of allowed at-rules.
at-rule-disallowed-list Specify a list of disallowed at-rules.
at-rule-no-vendor-prefix Disallow vendor prefixes for at-rules.	✅	🔧
at-rule-property-required-list Specify a list of required properties for an at-rule.

Color

color-hex-alpha Require or disallow alpha channel for hex colors.
color-named Require (where possible) or disallow named colors.
color-no-hex Disallow hex colors.

Comment

comment-word-disallowed-list Specify a list of disallowed words within comments.

Declaration

declaration-no-important Disallow !important within declarations.
declaration-property-unit-allowed-list Specify a list of allowed property and unit pairs within declarations.
declaration-property-unit-disallowed-list Specify a list of disallowed property and unit pairs within declarations.
declaration-property-value-allowed-list Specify a list of allowed property and value pairs within declarations.
declaration-property-value-disallowed-list Specify a list of disallowed property and value pairs within declarations.

Function

function-allowed-list Specify a list of allowed functions.
function-disallowed-list Specify a list of disallowed functions.
function-url-no-scheme-relative Disallow scheme-relative URLs.
function-url-scheme-allowed-list Specify a list of allowed URL schemes.
function-url-scheme-disallowed-list Specify a list of disallowed URL schemes.

Length

length-zero-no-unit Disallow units for zero lengths.	✅	🔧

Media feature

media-feature-name-allowed-list Specify a list of allowed media feature names.
media-feature-name-disallowed-list Specify a list of disallowed media feature names.
media-feature-name-no-vendor-prefix Disallow vendor prefixes for media feature names.	✅	🔧
media-feature-name-unit-allowed-list Specify a list of allowed name and unit pairs within media features.
media-feature-name-value-allowed-list Specify a list of allowed media feature name and value pairs.

Property

property-allowed-list Specify a list of allowed properties.
property-disallowed-list Specify a list of disallowed properties.
property-no-vendor-prefix Disallow vendor prefixes for properties.	✅	🔧

Rule

rule-selector-property-disallowed-list Specify a list of disallowed properties for selectors within rules.

Selector

selector-attribute-name-disallowed-list Specify a list of disallowed attribute names.
selector-attribute-operator-allowed-list Specify a list of allowed attribute operators.
selector-attribute-operator-disallowed-list Specify a list of disallowed attribute operators.
selector-combinator-allowed-list Specify a list of allowed combinators.
selector-combinator-disallowed-list Specify a list of disallowed combinators.
selector-disallowed-list Specify a list of disallowed selectors.
selector-no-qualifying-type Disallow qualifying a selector by type.
selector-no-vendor-prefix Disallow vendor prefixes for selectors.	✅	🔧
selector-pseudo-class-allowed-list Specify a list of allowed pseudo-class selectors.
selector-pseudo-class-disallowed-list Specify a list of disallowed pseudo-class selectors.
selector-pseudo-element-allowed-list Specify a list of allowed pseudo-element selectors.
selector-pseudo-element-disallowed-list Specify a list of disallowed pseudo-element selectors.

Unit

unit-allowed-list Specify a list of allowed units.
unit-disallowed-list Specify a list of disallowed units.

Value

value-no-vendor-prefix Disallow vendor prefixes for values.	✅	🔧

Case

Specify lowercase or uppercase for words with these case rules.

function-name-case Specify lowercase or uppercase for function names.	✅	🔧
selector-type-case Specify lowercase or uppercase for type selectors.	✅	🔧
value-keyword-case Specify lowercase or uppercase for keywords values.	✅	🔧

Empty lines

Enforce or disallow empty lines before constructs with these empty-line-before rules.

at-rule-empty-line-before Require or disallow an empty line before at-rules.	✅	🔧
comment-empty-line-before Require or disallow an empty line before comments.	✅	🔧
custom-property-empty-line-before Require or disallow an empty line before custom properties.	✅	🔧
declaration-empty-line-before Require or disallow an empty line before declarations.	✅	🔧
rule-empty-line-before Require or disallow an empty line before rules.	✅	🔧

Max & min

Apply limits with these max and min rules.

declaration-block-single-line-max-declarations Limit the number of declarations within a single-line declaration block.		✅
declaration-property-max-values Limit the number of values for a list of properties within declarations.
max-nesting-depth Limit the depth of nesting.
number-max-precision Limit the number of decimal places allowed in numbers.		✅
selector-max-attribute Limit the number of attribute selectors in a selector.
selector-max-class Limit the number of classes in a selector.
selector-max-combinators Limit the number of combinators in a selector.
selector-max-compound-selectors Limit the number of compound selectors in a selector.
selector-max-id Limit the number of ID selectors in a selector.
selector-max-pseudo-class Limit the number of pseudo-classes in a selector.
selector-max-specificity Limit the specificity of selectors.
selector-max-type Limit the number of type selectors in a selector.
selector-max-universal Limit the number of universal selectors in a selector.
time-min-milliseconds Limit the minimum number of milliseconds for time values.

Notation

Enforce one representation of things that have multiple with these notation (sometimes implicit) rules.

alpha-value-notation Specify percentage or number notation for alpha-values.	✅	🔧
color-function-notation Specify modern or legacy notation for color-functions.	✅	🔧
color-hex-length Specify short or long notation for hex colors.	✅	🔧
font-weight-notation Specify numeric or named notation for font weights.		🔧
hue-degree-notation Specify number or angle notation for degree hues.	✅	🔧
import-notation Specify string or URL notation for @import rules.	✅	🔧
keyframe-selector-notation Specify keyword or percentage notation for keyframe selectors.	✅	🔧
media-feature-range-notation Specify context or prefix notation for media feature ranges.	✅	🔧
selector-not-notation Specify simple or complex notation for :not() pseudo-class selectors.	✅	🔧
selector-pseudo-element-colon-notation Specify single or double colon notation for applicable pseudo-element selectors.	✅	🔧

Pattern

Enforce naming conventions with these pattern rules.

comment-pattern Specify a pattern for comments.
custom-media-pattern Specify a pattern for custom media query names.		✅
custom-property-pattern Specify a pattern for custom properties.		✅
keyframes-name-pattern Specify a pattern for keyframe names.		✅
selector-class-pattern Specify a pattern for class selectors.		✅
selector-id-pattern Specify a pattern for ID selectors.		✅
selector-nested-pattern Specify a pattern for the selectors of rules nested within rules.

Quotes

Require or disallow quotes with these quotes rules.

font-family-name-quotes Require or disallow quotes for font family names.	✅	🔧
function-url-quotes Require or disallow quotes for urls.	✅	🔧
selector-attribute-quotes Require or disallow quotes for attribute values.	✅	🔧

Redundant

Disallow redundancy with these no-redundant rules.

declaration-block-no-redundant-longhand-properties Disallow redundant longhand properties within declaration-block.	✅	🔧
shorthand-property-no-redundant-values Disallow redundant values within shorthand properties.	✅	🔧

Whitespace inside

Require or disallow whitespace on the inside with this whitespace-inside rule.

comment-whitespace-inside Require or disallow whitespace on the inside of comment markers.	✅	🔧

Deprecated

These rules are deprecated — we won't fix bugs nor add options, and we will remove them in the next major release. We recommend you use a pretty printer (like Prettier) alongside Stylelint rather than these rules.

Color

color-hex-case Specify lowercase or uppercase for hex colors.		🔧

Function

function-comma-newline-after Require a newline or disallow whitespace after the commas of functions.		🔧
function-comma-newline-before Require a newline or disallow whitespace before the commas of functions.		🔧
function-comma-space-after Require a single space or disallow whitespace after the commas of functions.		🔧
function-comma-space-before Require a single space or disallow whitespace before the commas of functions.		🔧
function-max-empty-lines Limit the number of adjacent empty lines within functions.		🔧
function-parentheses-newline-inside Require a newline or disallow whitespace on the inside of the parentheses of functions.		🔧
function-parentheses-space-inside Require a single space or disallow whitespace on the inside of the parentheses of functions.		🔧
function-whitespace-after Require or disallow whitespace after functions.		🔧

Number

number-leading-zero Require or disallow a leading zero for fractional numbers less than 1.		🔧
number-no-trailing-zeros Disallow trailing zeros in numbers.		🔧

String

string-quotes Specify single or double quotes around strings.		🔧

Unit

unit-case Specify lowercase or uppercase for units.		🔧

Value list

value-list-comma-newline-after Require a newline or disallow whitespace after the commas of value lists.		🔧
value-list-comma-newline-before Require a newline or disallow whitespace before the commas of value lists.
value-list-comma-space-after Require a single space or disallow whitespace after the commas of value lists.		🔧
value-list-comma-space-before Require a single space or disallow whitespace before the commas of value lists.		🔧
value-list-max-empty-lines Limit the number of adjacent empty lines within value lists.		🔧

Property

property-case Specify lowercase or uppercase for properties.		🔧

Declaration

declaration-bang-space-after Require a single space or disallow whitespace after the bang of declarations.		🔧
declaration-bang-space-before Require a single space or disallow whitespace before the bang of declarations.		🔧
declaration-colon-newline-after Require a newline or disallow whitespace after the colon of declarations.		🔧
declaration-colon-space-after Require a single space or disallow whitespace after the colon of declarations.		🔧
declaration-colon-space-before Require a single space or disallow whitespace before the colon of declarations.		🔧

Declaration block

declaration-block-semicolon-newline-after Require a newline or disallow whitespace after the semicolons of declaration blocks.		🔧
declaration-block-semicolon-newline-before Require a newline or disallow whitespace before the semicolons of declaration blocks.
declaration-block-semicolon-space-after Require a single space or disallow whitespace after the semicolons of declaration blocks.		🔧
declaration-block-semicolon-space-before Require a single space or disallow whitespace before the semicolons of declaration blocks.		🔧
declaration-block-trailing-semicolon Require or disallow a trailing semicolon within declaration blocks.		🔧

Block

block-closing-brace-empty-line-before Require or disallow an empty line before the closing brace of blocks.		🔧
block-closing-brace-newline-after Require a newline or disallow whitespace after the closing brace of blocks.		🔧
block-closing-brace-newline-before Require a newline or disallow whitespace before the closing brace of blocks.		🔧
block-closing-brace-space-after Require a single space or disallow whitespace after the closing brace of blocks.
block-closing-brace-space-before Require a single space or disallow whitespace before the closing brace of blocks.		🔧
block-opening-brace-newline-after Require a newline after the opening brace of blocks.		🔧
block-opening-brace-newline-before Require a newline or disallow whitespace before the opening brace of blocks.		🔧
block-opening-brace-space-after Require a single space or disallow whitespace after the opening brace of blocks.		🔧
block-opening-brace-space-before Require a single space or disallow whitespace before the opening brace of blocks.		🔧

Selector

selector-attribute-brackets-space-inside Require a single space or disallow whitespace on the inside of the brackets within attribute selectors.		🔧
selector-attribute-operator-space-after Require a single space or disallow whitespace after operators within attribute selectors.		🔧
selector-attribute-operator-space-before Require a single space or disallow whitespace before operators within attribute selectors.		🔧
selector-combinator-space-after Require a single space or disallow whitespace after the combinators of selectors.		🔧
selector-combinator-space-before Require a single space or disallow whitespace before the combinators of selectors.		🔧
selector-descendant-combinator-no-non-space Disallow non-space characters for descendant combinators of selectors.		🔧
selector-max-empty-lines Limit the number of adjacent empty lines within selectors.		🔧
selector-pseudo-class-case Specify lowercase or uppercase for pseudo-class selectors.		🔧
selector-pseudo-class-parentheses-space-inside Require a single space or disallow whitespace on the inside of the parentheses within pseudo-class selectors.		🔧
selector-pseudo-element-case Specify lowercase or uppercase for pseudo-element selectors.		🔧

Selector list

selector-list-comma-newline-after Require a newline or disallow whitespace after the commas of selector lists.		🔧
selector-list-comma-newline-before Require a newline or disallow whitespace before the commas of selector lists.		🔧
selector-list-comma-space-after Require a single space or disallow whitespace after the commas of selector lists.		🔧
selector-list-comma-space-before Require a single space or disallow whitespace before the commas of selector lists.		🔧

Media feature

media-feature-colon-space-after Require a single space or disallow whitespace after the colon in media features.		🔧
media-feature-colon-space-before Require a single space or disallow whitespace before the colon in media features.		🔧
media-feature-name-case Specify lowercase or uppercase for media feature names.		🔧
media-feature-parentheses-space-inside Require a single space or disallow whitespace on the inside of the parentheses within media features.		🔧
media-feature-range-operator-space-after Require a single space or disallow whitespace after the range operator in media features.		🔧
media-feature-range-operator-space-before Require a single space or disallow whitespace before the range operator in media features.		🔧

Media query list

media-query-list-comma-newline-after Require a newline or disallow whitespace after the commas of media query lists.		🔧
media-query-list-comma-newline-before Require a newline or disallow whitespace before the commas of media query lists.
media-query-list-comma-space-after Require a single space or disallow whitespace after the commas of media query lists.		🔧
media-query-list-comma-space-before Require a single space or disallow whitespace before the commas of media query lists.		🔧

At-rule

at-rule-name-case Specify lowercase or uppercase for at-rules names.		🔧
at-rule-name-newline-after Require a newline after at-rule names.
at-rule-name-space-after Require a single space after at-rule names.		🔧
at-rule-semicolon-newline-after Require a newline after the semicolon of at-rules.		🔧
at-rule-semicolon-space-before Require a single space or disallow whitespace before the semicolons of at-rules.

General / Sheet

indentation Specify indentation.		🔧
linebreaks Specify unix or windows linebreaks.		🔧
max-empty-lines Limit the number of adjacent empty lines.		🔧
max-line-length Limit the length of a line.
no-empty-first-line Disallow empty first lines.		🔧
no-eol-whitespace Disallow end-of-line whitespace.		🔧
no-extra-semicolons Disallow extra semicolons.		🔧
no-missing-end-of-source-newline Disallow missing end-of-source newlines.		🔧
unicode-bom Require or disallow Unicode BOM.