Skip to main content

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-media
Disallow unknown custom media queries.
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.
🔧