CSS Rules

Below the list of rules supported by Biome, divided by group. Here’s a legend of the emojis:

• The icon indicates that the rule is part of the recommended rules.
• The icon indicates that the rule provides a code action (fix) that is safe to apply.
• The icon indicates that the rule provides a code action (fix) that is unsafe to apply.
• The icon indicates that the rule has been implemented and scheduled for the next release.

a11y

Rule name	Description	Properties
useGenericFontNames	Require a generic fallback in font-family lists.

complexity

Rule name	Description	Properties
noExcessiveSelectorClasses	Limit the number of classes in a selector.
noImportantStyles	Disallow !important declarations.

correctness

Rule name	Description	Properties
noInvalidDirectionInLinearGradient	Disallow non-standard directions in linear gradients.
noInvalidGridAreas	Disallow invalid named areas in CSS grid templates.
noInvalidPositionAtImportRule	Disallow @import after other rules.
noMissingVarFunction	Require var() when using a declared CSS custom property.
noUnknownFunction	Disallow unrecognized CSS value functions.
noUnknownMediaFeatureName	Disallow unrecognized feature names in media queries.
noUnknownProperty	Disallow unrecognized CSS properties.
noUnknownPseudoClass	Disallow unrecognized pseudo-class selectors.
noUnknownPseudoElement	Disallow unrecognized pseudo-element selectors.
noUnknownTypeSelector	Disallow unrecognized element names in type selectors.
noUnknownUnit	Disallow unrecognized CSS units.
noUnmatchableAnbSelector	Disallow An+B formulas that cannot select an element.

nursery

Rule name	Description	Properties
noExcessiveNestedBlocks	Enforce a maximum depth that blocks can be nested.
noInvalidPropertyInitValue	Checks that the initial-value of an @property rule follows the value format declared by its syntax.
noMissingScssInterpolation	Disallow Sass variables and function calls in custom property values without #{} interpolation.
noPseudoElementInFunctionalPseudoClass	Disallow pseudo-elements inside :is(), :where(), :not() and :has().
noSelfNestedLayer	Disallow nesting a cascade layer inside a layer with the same name.
noShortTimeValues	Disallow animation and transition times that are shorter than a configured minimum.
noUndeclaredCustomProperties	Reports custom properties used with var() that have no visible declaration.
noUnusedClasses	Reports CSS class selectors that are never referenced in any JSX or HTML file.
noZeroLengthUnit	Disallow units on zero lengths.
useConsistentLightnessNotation	Enforce a consistent notation for the lightness of colors.
useConsistentUnicodeBom	Require or disallow a Unicode byte order mark at the beginning of a file.
useLayeredStyles	Enforce style rules to be defined within a cascade layer.
useLogicalProperties	Prefer logical CSS properties over physical properties.
useNamedLayer	Disallow anonymous cascade layers.

style

Rule name	Description	Properties
noDescendingSpecificity	Disallow lower-specificity selectors after higher-specificity selectors.
noExcessiveLinesPerFile	Restrict the number of lines in a file.
noHexColors	Disallow hex colors.
noValueAtRule	Disallow the @value rule in CSS Modules.

suspicious

Rule name	Description	Properties
noDeprecatedMediaType	Disallow deprecated media types.
noDuplicateAtImportRules	Disallow duplicate @import rules.
noDuplicateCustomProperties	Disallow duplicate custom properties within declaration blocks.
noDuplicateFontNames	Disallow duplicate names in font-family lists.
noDuplicateProperties	Disallow duplicate properties within declaration blocks.
noDuplicateSelectors	Disallow duplicate selectors.
noDuplicateSelectorsKeyframeBlock	Disallow duplicate selectors within keyframe blocks.
noEmptyBlock	Disallow empty CSS blocks.
noEmptySource	Disallow empty sources.
noImportantInKeyframe	Disallow !important in @keyframes declarations.
noIrregularWhitespace	Disallow whitespace characters that CSS does not treat as normal spaces.
noShorthandPropertyOverrides	Disallow shorthand properties that override earlier, more specific properties.
noUnknownAtRules	Disallow unrecognized CSS at-rules.
noUselessEscapeInString	Disallow unnecessary escapes in string literals.
useBaseline	Disallow CSS properties, values, at-rules, functions, and selectors that are not part of the configured Baseline.

Recommended rules

• useGenericFontNames (Severity: error)
• noImportantStyles (Severity: warning)
• noInvalidDirectionInLinearGradient (Severity: error)
• noInvalidGridAreas (Severity: error)
• noInvalidPositionAtImportRule (Severity: error)
• noMissingVarFunction (Severity: error)
• noUnknownFunction (Severity: error)
• noUnknownMediaFeatureName (Severity: error)
• noUnknownProperty (Severity: error)
• noUnknownPseudoClass (Severity: error)
• noUnknownPseudoElement (Severity: error)
• noUnknownTypeSelector (Severity: error)
• noUnknownUnit (Severity: error)
• noUnmatchableAnbSelector (Severity: error)
• noDescendingSpecificity (Severity: warning)
• noDeprecatedMediaType (Severity: warning)
• noDuplicateAtImportRules (Severity: error)
• noDuplicateCustomProperties (Severity: error)
• noDuplicateFontNames (Severity: error)
• noDuplicateProperties (Severity: error)
• noDuplicateSelectorsKeyframeBlock (Severity: error)
• noEmptyBlock (Severity: warning)
• noImportantInKeyframe (Severity: error)
• noIrregularWhitespace (Severity: warning)
• noShorthandPropertyOverrides (Severity: error)
• noUnknownAtRules (Severity: error)
• noUselessEscapeInString (Severity: warning)

Missing a rule? Help us by contributing to the analyzer or create a rule suggestion here.