JetBrains Rider 2023.3 Help

Code Inspections in CSS

This topic lists all JetBrains Rider code inspections available in CSS.

You can toggle specific inspections or change their severity level on the Editor | Inspection Settings | Inspection Severity | Other Languages page of the IDE settings  Ctrl+Alt+S.

Probable bugs

Inspection

Description

Default Severity

Missing comma in selector list

Reports a multi-line selector. Most likely this means that several single-line selectors are actually intended but a comma is missing at the end of one or several lines.

Example:

input /* comma has probably been forgotten */ .button { margin: 1px; }

Warning Warning

Missing generic font family name

Verifies that the font-family property contains a generic font family name as a fallback alternative.

Generic font family names are: serif, sans-serif, cursive, fantasy, and monospace.

Warning Warning

Non-integer length in pixels

Reports a non-integer length in pixels.

Example:

width: 3.14px

Weak Warning Weak warning

Code quality tools

Inspection

Description

Default Severity

Stylelint

Reports a discrepancy detected by the Stylelint linter.



The highlighting is based on the rule severity specified in the Stylelint configuration file for each individual rule.



Disabled

W3C CSS validator

Reports a discrepancy detected by the W3C CSS Validator.

Disabled

Code style issues

Inspection

Description

Default Severity

Missing semicolon

Reports a missing semicolon at the end of a declaration.

Disabled

Redundant measure unit

Reports a measure unit of a zero value where units are not required by the specification.

Example:

width: 0px

Warning Warning

Invalid elements

Inspection

Description

Default Severity

Invalid function

Reports an unknown CSS function or an incorrect function parameter.

Error Error

Invalid media feature

Reports an unknown CSS media feature or an incorrect media feature value.

Error Error

Invalid property value

Reports an incorrect CSS property value.

Error Error

Invalid pseudo-selector

Reports an incorrect CSS pseudo-class pseudo-element.

Error Error

Invalid type selector

Reports a CSS type selector that matches an unknown HTML element.

Warning Warning

Misplaced @import

Reports a misplaced @import statement.

According to the specification, @import rules must precede all other types of rules, except @charset rules.

Warning Warning

Misplaced or incorrect @charset

Reports a misplaced @charset at-rule or an incorrect charset value.

Warning Warning

Negative property value

Reports a negative value of a CSS property that is not expected to be less than zero, for example, object width or height.

Error Error

Unknown at-rule

Reports an unknown CSS at-rule.

Error Error

Unknown property

Reports an unknown CSS property or a property used in a wrong context.

Add the unknown property to the 'Custom CSS properties' list to skip validation.

Warning Warning

Unresolved class in 'composes' rule

Reports a CSS class reference in the 'composes' rule that cannot be resolved to any valid target.

Example:

.className {/* ... */} .otherClassName { composes: className; }

Error Error

Unresolved custom property

Reports an unresolved reference to a custom property among the arguments of the var() function.

Error Error

Unresolved file reference

Reports an unresolved file reference, for example, an incorrect path in an @import statement.

Error Error

Other inspections

Inspection

Description

Default Severity

Color could be replaced with #-hex

Reports an rgb(), hsl(), or other color function.

Suggests replacing a color function with an equivalent hexadecimal notation.

Example:

rgb(12, 15, 255)

After the quick-fix is applied:

#0c0fff

.

Disabled

Color could be replaced with rgb()

Reports an hsl() or hwb() color function or a hexadecimal color notation.

Suggests replacing such color value with an equivalent rgb() or rgba() color function.

Example:

#0c0fff

After the quick-fix is applied:

rgb(12, 15, 255)

.

Disabled

Overwritten property

Reports a duplicated CSS property within a ruleset. Respects shorthand properties.

Example:

.foo { margin-bottom: 1px; margin-bottom: 1px; /* duplicates margin-bottom */ margin: 0; /* overrides margin-bottom */ }

Warning Warning

Properties may be safely replaced with a shorthand

Reports a set of longhand properties. Suggests replacing a complete set of longhand CSS properties with an equivalent shorthand form.

For example, 4 properties: padding-top, padding-right, padding-bottom, and padding-left can be safely replaced with a single padding property.

Note that this inspection doesn't show up if the set of longhand properties is incomplete (e.g. only 3 padding-xxx properties in a ruleset) because switching to a shorthand may change the result. For such cases consider the 'Properties may probably be replaced with a shorthand' inspection.

Weak Warning Weak warning

Properties may probably be replaced with a shorthand

Reports a set of longhand CSS properties and suggests replacing an incomplete set of longhand CSS properties with a shorthand form, which is however not 100% equivalent in this case.

For example, 2 properties: outline-color and outline-style may be replaced with a single outline. Such replacement is not 100% equivalent because shorthands reset all omitted sub-values to their initial states. In this example, switching to the outline shorthand means that outline-width is also set to its initial value, which is medium.

This inspection doesn't handle full sets of longhand properties (when switching to shorthand is 100% safe). For such cases see the 'Properties may be safely replaced with a shorthand' inspection instead.

Info No highlighting, only fix

Property is incompatible with selected browsers

Reports a CSS property that is not supported by the specified browsers. Based on the MDN Compatibility Data.

Disabled

Unused selector

Reports a CSS class or an element IDs that appears in selectors but is not used in HTML.

Note that complete inspection results are available only when running it via Code | Inspect Code or Code | Analyze Code | Run Inspection by Name. Due to performance reasons, style sheet files are not inspected on the fly.

Warning Warning

Last modified: 21 March 2024