Code Inspection and Quick-Fixes in CSS
The key features of ReSharper's code analysis are also supported in CSS. You can find the detailed information on these features in the corresponding topics of the Code Analysis section. In the main topic of the section, you can also find the feature matrix and check what exactly is supported in CSS.
In this topic, you can find some examples of using code analysis features in CSS:
When ReSharper detects an error, it highlights it with a curly red line. You can hover the pointer over the error to display its description as a tooltip. For more information and other ways to find out why your code is highlighted, see Finding Out What is Wrong with Your Code. Since ReSharper has its own code inspections, you can specify whether to display them as errors, warnings, suggestions, hints, or not to display at all. For more information about configuring inspections, see Configuring Code Inspection Settings.
Examples of Quick-fixes
Switch validator to CSS [version number] version
Each CSS version brings new properties. ReSharper helps find the properties that do not fit the current CSS version that is specified for your project and provides the following quick-fix to change the version easily:
If there is a class name that does not have the corresponding style rule, ReShaper highlights such name and provides the following quick-fix. After applying the quick-fix, the corresponding class selector and empty declaration block are inserted.
If there is a
attribute that contains style information
for the current element and there is a
attribute with a name,
that is not used as a class selector in the corresponding style sheet, then ReSharper detects such situation
and offers the following quick-fix.
After applying the quick-fix, the appropriate style rule is added to the corresponding style sheet.
Viewing CSS hierarchy
ReSharper comes with a handy view that allows you to see the whole hierarchy of css selectors. For each selector in the hierarchy you can quickly view its definition.
ReSharper can also build the CSS hierarchy internally, showing you which styles override other styles and allowing you to navigate up the hierarchy. To toggle this feature, use the Build CSS style hierarchy check box on the Code Editing | CSS | Inspections options page.