CSS Rules

import { Icon } from "@astrojs/starlight/components";

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

• The icon <span class='inline-icon' title="This rule is recommended"><Icon name="approve-check-circle" label="This rule is recommended" /></span> indicates that the rule is part of the recommended rules.
• The icon <span class='inline-icon' title="This rule has a safe fix"><Icon name="seti:config" label="The rule has a safe fix" /></span> indicates that the rule provides a code action (fix) that is safe to apply.
• The icon <span class='inline-icon' title="This rule has an unsafe fix"><Icon name="warning" label="The rule has an unsafe fix" /></span> indicates that the rule provides a code action (fix) that is unsafe to apply.
• The icon <span class='inline-icon' title="This rule is not released yet"><Icon name="moon" label="This rule is not released yet" /></span> indicates that the rule has been implemented and scheduled for the next release.

a11y

Rule name	Description	Properties
useGenericFontNames	Disallow a missing generic family keyword within font families.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>

complexity

Rule name	Description	Properties
noImportantStyles	Disallow the use of the !important style.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span><span class='inline-icon' title="The rule has an unsafe fix" ><Icon name="warning" label="The rule has an unsafe fix" size="1.2rem" /></span>

correctness

Rule name	Description	Properties
noInvalidDirectionInLinearGradient	Disallow non-standard direction values for linear gradient functions.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noInvalidGridAreas	Disallows invalid named grid areas in CSS Grid Layouts.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noInvalidPositionAtImportRule	Disallow the use of @import at-rules in invalid positions.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noMissingVarFunction	Disallow missing var function for css variables.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noUnknownFunction	Disallow unknown CSS value functions.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noUnknownMediaFeatureName	Disallow unknown media feature names.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noUnknownProperty	Disallow unknown properties.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noUnknownPseudoClass	Disallow unknown pseudo-class selectors.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noUnknownPseudoElement	Disallow unknown pseudo-element selectors.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noUnknownTypeSelector	Disallow unknown type selectors.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noUnknownUnit	Disallow unknown CSS units.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noUnmatchableAnbSelector	Disallow unmatchable An+B selectors.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>

nursery

Rule name	Description	Properties
noDeprecatedMediaType	Disallow deprecated media types.
noExcessiveLinesPerFile	Restrict the number of lines in a file.
noHexColors	Disallow hex colors.
useBaseline	Disallow CSS properties, values, at-rules, functions, and selectors that are not part of the configured Baseline.	<span class='inline-icon' title="This rule is not released yet"><Icon name="moon" label="This rule is not released yet" size="1.2rem" /></span>

style

Rule name	Description	Properties
noDescendingSpecificity	Disallow a lower specificity selector from coming after a higher specificity selector.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noValueAtRule	Disallow use of @value rule in CSS modules.

suspicious

Rule name	Description	Properties
noDuplicateAtImportRules	Disallow duplicate @import rules.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noDuplicateCustomProperties	Disallow duplicate custom properties within declaration blocks.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noDuplicateFontNames	Disallow duplicate names within font families.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noDuplicateProperties	Disallow duplicate properties within declaration blocks.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noDuplicateSelectorsKeyframeBlock	Disallow duplicate selectors within keyframe blocks.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noEmptyBlock	Disallow CSS empty blocks.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noEmptySource	Disallow empty sources.
noImportantInKeyframe	Disallow invalid !important within keyframe declarations	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noIrregularWhitespace	Disallows the use of irregular whitespace characters.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noShorthandPropertyOverrides	Disallow shorthand properties that override related longhand properties.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noUnknownAtRules	Disallow unknown at-rules.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span>
noUselessEscapeInString	Disallow unnecessary escapes in string literals.	<span class='inline-icon' title="This rule is recommended" ><Icon name="approve-check-circle" size="1.2rem" label="This rule is recommended" /></span><span class='inline-icon' title='The rule has a safe fix.'><Icon name="seti:config" label="The rule has a safe fix" size="1.2rem" /></span>

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)
• 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.