CSS Support in ReSharper 6

gorohoroh

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:

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:

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:

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:

File Structure and Go to File Member

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

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

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

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:

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:

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

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:

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.

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:

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!

Subscribe to a monthly digest curated from the .NET Tools blog:

Subscribe form

By submitting this form, I agree to the JetBrains Privacy Policy Notification icon

By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and location data to send me newsletters, including commercial communications, and to process my personal data for this purpose. I agree that JetBrains may process said data using third-party services for this purpose in accordance with the JetBrains Privacy Policy. I understand that I can revoke this consent at any time in my profile. In addition, an unsubscribe link is included in each email.

Submit

Thanks, we've got you!