ReSharper 2016.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 box.

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 Coding_Assistance__Context_Actions__icon_editing 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 in 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 box 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. On 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.

See Also

Last modified: 19 August 2016