ReSharper 8.0 Web Help

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:

ReSharper_by_Language__CSS__Highlighting

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).

ReSharper_by_Language__CSS__Highlighting__Tooltip_for_color_value

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.

ReSharper_by_Language__CSS__Highlighting__Error

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.

ReSharper_by_Language__CSS__Inspection_Severity

For more information about configuring inspections, see Configuring Code Inspection Settings.

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.

ReSharper_by_Language__CSS__Code_Completion_03

ReSharper_by_Language__CSS__Code_Completion_05

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.

ReSharper_by_Language__CSS__Code_Completion_04

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

ReSharper_by_Language__CSS__Code_Completion_01

...and property values:

ReSharper_by_Language__CSS__Code_Completion_02

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

ReSharper_by_Language__CSS__Code_Completion_07

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

ReSharper_by_Language__CSS__Code_Completion_06

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:

ReSharper_by_Language__CSS__Quick-Fixes__switch_validator_01

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.

ReSharper_by_Language__CSS__Quick-Fixes__create_style_01

After applying the quick-fix, the corresponding class selector and empty declaration block are inserted.

ReSharper_by_Language__CSS__Quick-Fixes__create_style_02

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.

ReSharper_by_Language__CSS__Quick-Fixes__extract_style_01

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:

ReSharper_by_Language__CSS__Context_Actions__pick_color_01

Quick documentation

To view quick documentation for css elements
  1. Place the caret at a property, function, pseudo element, pseudo class or media feature in CSS file or markup file.
  2. On the main menu, choose ReSharper | Edit | Show Quick Documentation or press Ctrl+QCtrl+Shift+F1. The Quick Documentation pop-up window displays summary information for the corresponding element:
    ReSharper_by_Language__CSS__Quick_Documentation

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

Tip

You can invoke Quick Documentation from the text editor or File Structure window.

See Also

Procedures: