Code Analysis and Coding Assistance

ReSharper provides the following code analysis and coding assistance features for CSS file.

Syntax highlighting

ReSharper highlights selectors, properties and values of properties, at-rules (such as @import and @media), functions that can be used as property values, pseudo-classes, etc. Default syntax highlighting for CSS:

In addition to standard syntax highlighting that is common for all file types supported by ReSharper, it provides some special features for CSS files. Any color value is underlined with a respective color, it doesn't matter how it is defined (color name, hex code or RGB code).

When you hover the pointer over the color value, a tooltip appears. If the color is one of the colors defined in CSS (CSS and HTML) specification, color name is displayed near the icon, otherwise icon, hex code and RBG code are displayed in the tooltip for the corresponding color value.

See Color Assistance to find out more about defining the color and the Select Color dialog box.

Code highlighting

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 ReSharper Inspections.

Code completion

ReSharper provides its own IntelliSense in CSS files and in other file types where CSS can be used. It helps you complete HTML tag names, including those introduced with HTML 5.



In fact, ReSharper code completion helps in multiple scenarios when you specify selectors. For example, it provides a list of available pseudo-classes after colon.

Sure enough, ReSharper code completion suggests available properties...

...and property values:

On top of that, ReSharper suggests available classes when you’re invoking code completion inside the value of the class attribute…

…and available id’s within the id attribute in HTML or ASP.NET markup files:

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:

Create style
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.

Extract style
If there is a style attribute that contains style information for the current element and there is a class 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.

Examples of context actions

To define or change a color, apply the following context action. The Select Color dialog box appears and you can choose whatever color you need:

Quick documentation

If you need some extra information, click read more to navigate to the specification directly.