Skip to content

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.
Rule nameDescriptionProperties
useGenericFontNamesRequire a generic fallback in font-family lists.
Rule nameDescriptionProperties
noImportantStylesDisallow !important declarations.
Rule nameDescriptionProperties
noInvalidDirectionInLinearGradientDisallow non-standard directions in linear gradients.
noInvalidGridAreasDisallow invalid named areas in CSS grid templates.
noInvalidPositionAtImportRuleDisallow @import after other rules.
noMissingVarFunctionRequire var() when using a declared CSS custom property.
noUnknownFunctionDisallow unrecognized CSS value functions.
noUnknownMediaFeatureNameDisallow unrecognized feature names in media queries.
noUnknownPropertyDisallow unrecognized CSS properties.
noUnknownPseudoClassDisallow unrecognized pseudo-class selectors.
noUnknownPseudoElementDisallow unrecognized pseudo-element selectors.
noUnknownTypeSelectorDisallow unrecognized element names in type selectors.
noUnknownUnitDisallow unrecognized CSS units.
noUnmatchableAnbSelectorDisallow An+B formulas that cannot select an element.
Rule nameDescriptionProperties
noDuplicateSelectorsDisallow duplicate selectors.
noExcessiveSelectorClassesLimit the number of classes in a selector.
noInvalidPropertyInitValueChecks that the initial-value of an @property rule follows the value format declared by its syntax.
noUndeclaredCustomPropertiesReports custom properties used with var() that have no visible declaration.
noUnusedClassesReports CSS class selectors that are never referenced in any JSX or HTML file.
useBaselineDisallow CSS properties, values, at-rules, functions, and selectors that are not part of the configured Baseline.
useLayeredStylesEnforce style rules to be defined within a cascade layer.
useLogicalPropertiesPrefer logical CSS properties over physical properties.
useNamedLayerDisallow anonymous cascade layers.
Rule nameDescriptionProperties
noDescendingSpecificityDisallow lower-specificity selectors after higher-specificity selectors.
noExcessiveLinesPerFileRestrict the number of lines in a file.
noHexColorsDisallow hex colors.
noValueAtRuleDisallow the @value rule in CSS Modules.
Rule nameDescriptionProperties
noDeprecatedMediaTypeDisallow deprecated media types.
noDuplicateAtImportRulesDisallow duplicate @import rules.
noDuplicateCustomPropertiesDisallow duplicate custom properties within declaration blocks.
noDuplicateFontNamesDisallow duplicate names in font-family lists.
noDuplicatePropertiesDisallow duplicate properties within declaration blocks.
noDuplicateSelectorsKeyframeBlockDisallow duplicate selectors within keyframe blocks.
noEmptyBlockDisallow empty CSS blocks.
noEmptySourceDisallow empty sources.
noImportantInKeyframeDisallow !important in @keyframes declarations.
noIrregularWhitespaceDisallow whitespace characters that CSS does not treat as normal spaces.
noShorthandPropertyOverridesDisallow shorthand properties that override earlier, more specific properties.
noUnknownAtRulesDisallow unrecognized CSS at-rules.
noUselessEscapeInStringDisallow unnecessary escapes in string literals.

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