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;
}
| |
Missing generic font family name | Verifies that the serif, sans-serif, cursive, fantasy, and monospace. | |
Non-integer length in pixels | Reports a non-integer length in pixels. Example: width: 3.14px |
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. | |
W3C CSS validator | Reports a discrepancy detected by the W3C CSS Validator. |
Code style issues
Invalid elements
Inspection | Description | Default Severity |
|---|---|---|
Invalid function | Reports an unknown CSS function or an incorrect function parameter. | |
Invalid media feature | Reports an unknown CSS media feature or an incorrect media feature value. | |
Invalid property value | Reports an incorrect CSS property value. | |
Invalid pseudo-selector | Reports an incorrect CSS pseudo-class pseudo-element. | |
Invalid type selector | Reports a CSS type selector that matches an unknown HTML element. | |
Misplaced @import | Reports a misplaced @import rules must precede all other types of rules, except @charset rules. | |
Misplaced or incorrect @charset | Reports a misplaced | |
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. | |
Unknown at-rule | Reports an unknown CSS at-rule. | |
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. | |
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;
}
| |
Unresolved custom property | Reports an unresolved reference to a custom property among the arguments of the | |
Unresolved file reference | Reports an unresolved file reference, for example, an incorrect path in an |
Other inspections
Inspection | Description | Default Severity |
|---|---|---|
Color could be replaced with #-hex | Reports an rgb(12, 15, 255) After the quick-fix is applied: #0c0fff . | |
Color could be replaced with rgb() | Reports an rgb() or rgba() color function. Example: #0c0fff After the quick-fix is applied: rgb(12, 15, 255) . | |
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 */
}
| |
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. | |
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. | |
Property is incompatible with selected browsers | Reports a CSS property that is not supported by the specified browsers. Based on the MDN Compatibility Data. | |
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. |
No highlighting, only fix