rules.md

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.	✅	🔧
lightness-notation Specify number or percentage notation for lightness.	✅	🔧
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.	✅	🔧