PhpStorm 2021.1 Help

Code Inspections in CSS

This topic lists all PhpStorm code inspections available in CSS.

You can toggle specific inspections or change their severity level on the Editor | Inspections page of the IDE settings Ctrl+Alt+S.

Probable bugs

InspectionDescriptionDefault 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

InspectionDescriptionDefault 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

InspectionDescriptionDefault 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

InspectionDescriptionDefault 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

InspectionDescriptionDefault 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)#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:
#0c0fffrgb(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 may 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. 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 one. 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 'Analyze | Inspect Code...' or 'Analyze | Run Inspection by Name...'. Due to performance reasons, style sheet files are not inspected on the fly.

Warning Warning
Last modified: 16 July 2021