ReSharper 2018.1 Help

Coding Assistance

Most of ReSharper's coding assistance features are also supported in CSS. You can find the detailed information on these features in the corresponding topics of the Coding Assistance 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 coding assistance features in CSS:

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.

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 Context Actions

ReSharper provides a set of context actions that target CSS code. You can find the full list of these actions in the Code Editing | CSS | Context actions page of ReSharper Options. If necessary, you can also disable some of the actions using this page.

As soon as a context action becomes available for the current caret position, ReSharper displays the corresponding action indicator ThemedIcon ContextAction Screen Gray to the left of the caret. Sometimes however, ReSharper provides several contextually available features for the current caret position. In this case, the action indicator corresponding to the action with the highest priority is shown, and all other actions only appear when you expand the action list by clicking on the action indicator or pressing Alt+Enter Context actions have the lowest priority, therefore, they often appear at the bottom of the action list:

Here are some examples of context actions for CSS:

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

ReSharper by Language CSS Context Actions pick color 01

Quick Documentation

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

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. In the main menu, choose ReSharper | Edit | Show Quick Documentation or press Ctrl+Q. 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.

Rearranging code

The rearrange code feature is supported in CSS files allowing you to quickly rearrange elements and logical blocks of CSS code.

Last modified: 20 August 2018

See Also