PhpStorm 2020.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 Settings/Preferences Ctrl+Alt+S.

Probable bugs

Inspection

Description

Default Severity

Float px length

This inspection detects float values of pixel lengths.

Weak Warning Weak warning
Missing comma

This inspection detects missing comma between selectors at the end of line.

Warning Warning
Missing generic font name

This inspection verifies that the CSS font-family property contains a generic font name as a fallback alternative.

Warning Warning
Missing measure unit

This inspection highlights CSS number property values for which no units of measurement are specified.

Warning Warning

Code quality tools

Inspection

Description

Default Severity

Stylelint

Runs Stylelint validator for specified stylesheet file.

The severity level of the inspection is applied only for the 'Inspect code...' action. Severity levels used in the editor can be configured in the Stylelint configuration file for each individual rule.

Disabled

Code style issues

Inspection

Description

Default Severity

Missing semicolon

This inspection detects missing semicolon at the end of declarations.

Disabled
Redundant measure unit

This inspection highlights zero values with specified unit of measurement.

Warning Warning

Invalid elements

Inspection

Description

Default Severity

Invalid CSS @charset rule

This inspection detects misplaced @charset rules and inappropriate charset values.

Warning Warning
Invalid CSS element

This inspection detects inappropriate values assigned to CSS attributes. For example, invalid measurement units or values out of range.

Error Error
Invalid CSS function

This inspection detects unknown functions and illegal function parameters.

Error Error
Invalid CSS media feature

This inspection detects unknown media features and illegal media feature values.

Error Error
Invalid CSS property value

This inspection detects illegal property's values.

Error Error
Invalid CSS pseudo-selector

This inspection detects unknown and inappropriate pseudo-classes and pseudo-elements.

Error Error
Invalid CSS selector

This inspection detects unknown CSS selectors and provides ability to declare them as a class or an id.

Warning Warning
Misplaced CSS @import

This inspection detects misplaced CSS @import declarations.

Warning Warning
Negative CSS value

This inspection detects negative values assigned to CSS attributes that should never be negative. For example, object width or height.

Error Error
Unknown CSS at-rule

This inspection detects unknown CSS at-rules.

Error Error
Unknown CSS property

Highlights CSS properties that are unknown or used in wrong context, and allows to define such properties as 'custom' to avoid highlighting them as invalid.

Warning Warning
Unknown file or directory

This inspection checks references to files and directories.

Error Error
Unresolved CSS Class

This inspection warns about CSS class references which cannot be resolved to any valid target.

Error Error
Unresolved CSS Custom Property

This inspection warns about CSS custom property variable references which cannot be resolved to any valid target.

Error Error

Other inspections

Inspection

Description

Default Severity

#HEX color representation instead of RGB color function

This inspection detects CSS colors which are defined as HEX, and provides a quickfix action to convert such values to a CSS rgb() function call.

Disabled
Browser compatibility for properties

Reports CSS properties that are not supported by the specified browsers. This inspection is based on the MDN Compatibility Data.

Disabled
Overwritten property value

This inspection highlights CSS properties, which are being overwritten in the same ruleset block.

Warning Warning
Properties may be safely replaced with a shorthand

If a CSS ruleset contains a complete set of longhand properties then this inspection suggests transforming them into a 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

If a CSS ruleset contains a number of longhand properties that do not constitute a complete set then this inspection suggests transforming the properties into a shorthand form.

For example, 2 properties: outline-color and outline-style may be replaced with a single outline one. However 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

RGB color function instead of #HEX representation

This inspection detects CSS colors which are defined as CSS rgb() function and provides an intention to convert such values to its HEX representation.

Disabled
Unused CSS selector

This inspection detects unused CSS classes or IDs within a file.

Warning Warning
Last modified: 26 May 2020