跳到主要内容

Rules

There are over 170 rules that help you:

The rules:

  • are for standard CSS syntax only
  • are generally useful; not tied to idiosyncratic patterns
  • have a clear and unambiguous finished state
  • have a singular purpose; don't overlap with other rules

A rule's name is split into two parts:

  • the thing the rule applies to, e.g. at-rule
  • what the rule is checking, e.g. disallowed-list

Unless it applies to the whole source, then there is no first part.

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.

Empty​

Disallow empty things with these no-empty rules.

Invalid​

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

Irregular​

Disallow irregular things with these no-irregular rules.

Missing​

Disallow missing things with these no-missing rules.

Non-standard​

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

Overrides​

Disallow overrides with these no-overrides rules.

Unknown​

Disallow unknown things with these no-unknown rules.

Enforce non-stylistic conventions​

You can enforce non-stylistic conventions with these no and list rules. They are powerful rules for making your CSS 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​

Color​

Comment​

Declaration​

Function​

Length​

Media feature​

Property​

Rule​

Selector​

Unit​

Value​

Max & min​

Apply limits with these max and min rules.

Notation​

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

Pattern​

Enforce naming conventions with these pattern rules.

Quotes​

Require or disallow quotes with these quotes rules.

Redundant​

Disallow redundancy with these no-redundant rules.

Enforce stylistic conventions​

We have frozen these rules — we won't fix bugs nor add options, and we will deprecate then remove them in future releases. We recommend you use a pretty printer (like Prettier) alongside Stylelint rather than these rules. If you prefer to use Stylelint to enforce stylistic consistency, you can migrate the rules you need to a plugin.

The whitespace rules allow you to enforce an empty line, a single space, a newline or no space in some specific part of the stylesheet.

The whitespace rules combine two sets of keywords:

  • before, after and inside to specify where the whitespace (if any) is expected
  • empty-line, space and newline to specify whether a single empty line, a single space, a single newline or no space is expected there

For example, specifying if a single empty line or no space must come before all the comments in a stylesheet:

  • comment-empty-line-before: string - "always"|"never"
a {}
              ←
/* comment */ ↑
              ↑
/**           ↑
 * This empty line  */

Additionally, some whitespace rules use an additional set of keywords:

  • comma, colon, semicolon, opening-brace, closing-brace, opening-parenthesis, closing-parenthesis, operator or range-operator are used if a specific piece of punctuation in the thing is being targeted

For example, specifying if a single space or no space must follow a comma in a function:

  • function-comma-space-after: string - "always"|"never"
a { transform: translate(1, 1) }
/**                       ↑
 * The space after this commas */

The plural of the punctuation is used for inside rules. For example, specifying if a single space or no space must be inside the parentheses of a function:

  • function-parentheses-space-inside: string - "always"|"never"
a { transform: translate( 1, 1 ); }
/**                     ↑      ↑
 * The space inside these two parentheses */

Not handled by pretty printers​

Value​

Function​

Custom property​

Selector​

Rule​

At-rule​

Comment​

Handled by pretty printers​

Color​

  • color-hex-case: Specify lowercase or uppercase for hex colors (Autofixable).

Function​

Number​

String​

  • string-quotes: Specify single or double quotes around strings (Autofixable).

Unit​

  • unit-case: Specify lowercase or uppercase for units (Autofixable).

Value list​

Property​

  • property-case: Specify lowercase or uppercase for properties (Autofixable).

Declaration​

Declaration block​

Block​

Selector​

Selector list​

Media feature​

Media query list​

At-rule​

General / Sheet​