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
Inspection | Description | Default Severity |
|---|---|---|
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;
}
| | |
Verifies that the serif, sans-serif, cursive, fantasy, and monospace. | | |
Reports a non-integer length in pixels. Example: width: 3.14px | |
Code quality tools
Inspection | Description | Default Severity |
|---|---|---|
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. | ||
Reports a discrepancy detected by the W3C CSS Validator. |
Code style issues
Inspection | Description | Default Severity |
|---|---|---|
Reports a missing semicolon at the end of a declaration. | ||
Reports a measure unit of a zero value where units are not required by the specification. Example:width: 0px | |
Invalid elements
Inspection | Description | Default Severity |
|---|---|---|
Reports an unknown CSS function or an incorrect function parameter. | | |
Reports an unknown CSS media feature or an incorrect media feature value. | | |
Reports an incorrect CSS property value. | | |
Reports an incorrect CSS pseudo-class pseudo-element. | | |
Reports a CSS type selector that matches an unknown HTML element. | | |
Reports a misplaced @import rules must precede all other types of rules, except @charset rules. | | |
Reports a misplaced | | |
Reports a negative value of a CSS property that is not expected to be less than zero, for example, object width or height. | | |
Reports an unknown CSS at-rule. | | |
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. | | |
Reports a CSS class reference in the 'composes' rule that cannot be resolved to any valid target. Example:
.className {/* ... */}
.otherClassName {
composes: className;
}
| | |
Reports an unresolved reference to a custom property among the arguments of the | | |
Reports an unresolved file reference, for example, an incorrect path in an | |
Other inspections
Inspection | Description | Default Severity |
|---|---|---|
Reports an rgb(12, 15, 255) After the quick-fix is applied: #0c0fff . | ||
Reports an rgb() or rgba() color function. Example: #0c0fff After the quick-fix is applied: rgb(12, 15, 255) . | ||
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 */
}
| | |
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. | | |
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. | | |
Reports a CSS property that is not supported by the specified browsers. Based on the MDN Compatibility Data. | ||
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. | |
No highlighting, only fix