Rules
There are over one hundred built-in rules to help you:
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. |