How-To's

CSS Support in ReSharper 6

ReSharper 6 EAP has been available for about 1.5 months, and it’s time to move on zooming into new features that this new version brings.

We’ve announced that supporting JavaScript and CSS is one of the most important directions in ReSharper 6, and following an earlier post about JavaScript support, let’s take a look at the second major functionality area for ReSharper 6: support for CSS. It is currently represented by the following features:

Syntax/Color Highlighting and Palette

ReSharper applies its own highlighting to CSS syntax including properties and functions:

Syntax highlighting in CSS files

Property values representing colors is another item that ReSharper highlights and provides additional assistance for. Every color value is underlined with a respective color, and there’s a quick-fix available to help change the color:

Color highlighting and access to the Select Color window in CSS

As soon as you select the quick-fix, ReSharper shows the Select Color window that contains controls to fine-tune the color based on any property:

Select Color window to select color in CSS

CSS Validation

Whenever ReSharper fails to validate a CSS symbol, it leaves a mark on the marker bar and, when you hover the mouse over the error, tells you what it expects to see:

CSS validation with custom error messages

File Structure and Go to File Member

File Structure and Go to File Member have both successfully arrived to CSS files:

File Structure in CSS files

These navigation features fully support lowerCamelCase search, enabling you to instantly land at selectors with tricky names, like this:

Go to File Member: find all selectors in file by name

The same technique can be applied to properties. -webkit-border-top-left-radius anyone?

Go to File Member: find all properties in file by name

Find Usages

You can easily find where a certain CSS property or selector is used both within the current file and in a larger scope. For example, when you have multiple CSS files in your solution, applying Find Usages over a selector in one of these files finds all occurrences of the selector in all remaining files:

ReSharper lets you find all usages of a selector in all CSS files

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 helps complete HTML tag names in CSS

It lists available HTML attributes in a similar way after the opening bracket:

ReSharper completes HTML attributes after the opening bracket in CSS

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 helps complete all kinds of selectors including pseudo-classes

Sure enough, ReSharper code completion suggests available properties…

ReSharper suggests CSS properties matching a given lowerCamelCase-enabled string

…and property values:

ReSharper suggests CSS property values matching a given lowerCamelCase-enabled string

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

ReSharper code completion for CSS classes in markup files

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

ReSharper code completion for CSS id selectors in markup files

To sum up most significant benefits of ReSharper code completion in CSS over Visual Studio native IntelliSense:

  • ReSharper provides completion for all kinds of selectors, including elements, .classes, #id’s, [attribute]s, and :pseudo-elements in CSS files.
  • Both ReSharper and Visual Studio provide completion for properties and values in CSS files. However, ReSharper code completion supports lowercase CamelHumps, letting you complete background-color by only entering bc.
  • Both ReSharper and Visual Studio complete usages of CSS classes in markup files but ReSharper goes further by completing usages of id’s.

Rename Selectors

Naturally, the majority of ReSharper refactorings are not applicable in CSS, but some of them could work there just fine. The first refactoring to be provided in CSS is the Rename refactoring.

With ReSharper 6, you can rename a class selector — both from its declaration in a CSS file and from its usage in markup files.

ReSharper renames a class selector from its declaration

Of course, whichever way you choose, all usages of the class selector in markup and all CSS files are updated accordingly. In addition, as you would expect, ReSharper will let you rename any occurrences of the old selector name in comments:

ReSharper finds class selector name usages in comments

A couple more CSS-specific refactorings are in the works, as well as other nice CSS support features here and there.

Download ReSharper 6 EAP builds and explore the goodies!

image description