Skip to content

Latest commit

 

History

History
458 lines (315 loc) · 34.3 KB

rules.md

File metadata and controls

458 lines (315 loc) · 34.3 KB
Raw

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