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!

Comments below can no longer be edited.

37 Responses to CSS Support in ReSharper 6

  1. Avatar

    Peter says:

    February 15, 2011

    Looks awesome!

    I especially like the Rename refactoring. Another one that would be useful (to me, at least) would be an “Extract CSS class” refactoring that would allow you to highlight an inline style and “extract” it to a class in your css file.

  2. Avatar

    Jura Gorohovsky says:

    February 15, 2011

    The refactoring that you’re talking about is in the Grand Plan 🙂

  3. Avatar

    Roland says:

    February 15, 2011

    OMG OMG, the color picker I asked for ! OMG OMG 🙂 THANKS GUYS !

    When is the release ? I wanna upgrade !

    PS. Other thinks are awesome also 🙂

    PS2: Would it be possible to add another tab to color picker that list all colors in current document ?

  4. Avatar

    Jura Gorohovsky says:

    February 15, 2011

    The release is currently scheduled for late Spring.
    Why would you want to list all colors in the current documents? Please explain your use case

  5. Avatar

    Andy Alm says:

    February 15, 2011

    Are there any plans to support LESS? I don’t care a whole lot about full support, but it would sure be nice if it could at least bring highlighting and code completion support into .less files and have it handle nested rules. Visual Studio’s highlighting and code completion gets completely confused by nested rules.

  6. Avatar

    Roland says:

    February 15, 2011


    When adding new color, would be nice to see all in document (maybe with selector name) so I can add mathing color. Thats just the idea 🙂

  7. Avatar

    Jura Gorohovsky says:

    February 15, 2011

    No, no such plans yet.
    Can you point me to a publicly available project that uses LESS extensively so that we can take a look at it to determine the scope of work?

    Good idea! I can’t commit to anything but we’ll consider implementing it.
    Here’s the corresponding feature request in ReSharper issue tracker that you can vote for:

  8. Avatar

    sync says:

    February 15, 2011

    it’ll be awesome if you integrate zencoding. thanks!

  9. Avatar

    Andreas says:

    February 15, 2011

    Awesome, just awesome work!

    I’d really love the feature Roland suggested. Usually when create the design in CSS I have a set of colors I use, 3-5 colors. Right now I have to remember and find the last placeI used it and copy paste it. It would be great if I had that tab and could simpy select it from the list!

    Another nice to have feature is a small thumbnail preview of background images when you hover over the path name or property.

    Looking forward to the final version!

  10. Avatar

    Andy Alm says:

    February 15, 2011

    I’m sorry, I don’t know of any .NET projects that are publicly available that currently use LESS extensively (though I’m sure they exist). We use it extensively here at my company, but the code is not publicly available. RubyMine recently added LESS support though so you maybe you could talk to your colleague’s who developed that to get a rough idea of the scope.

  11. Avatar

    Jura Gorohovsky says:

    February 15, 2011

    We’re not planning to integrate zencoding into the main product.
    Do you experience any difficulties using it via a powertoy?

    Please vote for the feature request then:
    This is a possible use case for smart completion in CSS
    Preview for URL resources in CSS is planned but I’m not sure whether it will be implemented for ReSharper 6.

    I’ve created a feature request regarding LESS. Please vote:

  12. Avatar

    Simon Bartlett says:

    February 15, 2011

    My team are using a .NET port of LESS called dotLess! http:2/

  13. Avatar

    Will Holley says:

    February 16, 2011

    We are also using dotLess extensively. I would imagine that given the syntax is so close to css, you could get some benefits by just pretending it is css (i.e. allowing syntax / colour highlighting on files with extensions other than .css)

  14. Avatar

    Łukasz Podolak says:

    February 16, 2011

    LESS is becoming ubiquitous in many projects rapidly.
    I vote using my hands an legs for this feature.

  15. Avatar

    Quentin says:

    February 16, 2011

    We also use dotLess. I figure it’s a long shot, but some support for LESS would be so greatly appreciated. That alone could convince our entire office to get licenses.

  16. Avatar

    Rob says:

    February 16, 2011

    +1 for dotLess support. I use it extensively. I then convert it to css files either via T4 ( and or via NAnt build target. Either way, knowing the CSS is wrong in the .less file is much more helpful than analyzing the css file once transformed.

  17. Avatar

    Mike says:

    February 16, 2011

    Will ReSharper 6 support lessCss files ( We’ve used Less in our latest project and it’s awesome for making CSS more maintainable etc.

    Fingers crossed 🙂

  18. Avatar

    w0ut says:

    February 17, 2011

    Nice!! I’m looking forward to these new features.

    Other CSS feature suggestions :

    * Combine 2 style sheets into one & automatically group similar styles together taking into account the order the style sheets are included in the (web)page.

    * Validate your CSS against a certain browser (version)

    * CSS stylesheet minimalisation during the publishing of a site.

    * Detection if a color can be converted to a “web safe color”.

    * Declaring of color variables. Resharper automatically replaces the variables with the color assigned to the variable. (during deploy, publish, debug, …. )

    * Possibility to add extra comments, create collapsible area’s without actually storing these extra comments and area definitions in the actual CSS file. So the CSS file stays clean without the extra comments etc…

    Feel free to include me in the beta 😉

  19. Avatar

    Dan Sargeant says:

    February 17, 2011

    Looking great. I would also like to see the ability to use an equivalent of #region in css files to break the file into sections. Along with some sort of window or keyboard shortcut to quickly navigate the different regions it would save an awful lot of scrolling.

  20. Avatar

    Jura Gorohovsky says:

    February 17, 2011

    Thanks, I’ll pass your suggestions to the developers. No commitments yet though.

    Good idea but unfortunately not on our agenda right now. Meanwhile, may Go to File Member ease your pain 🙂

    Please see comments above. Supporting LESS is not currently in the plan but we’ll see what we can do in future. You can vote for the corresponding feature request at

  21. Avatar

    Stacey says:

    February 18, 2011

    I think I just blew up from excitement. The level of joy I feel cannot be appropriately expressed in actual words in public forum.

  22. Avatar

    Jura Gorohovsky says:

    February 18, 2011

    Thanks for a leading candidate for the Comment of the Year 🙂

  23. Avatar

    Matt S. says:

    February 20, 2011

    I will definitely vote for less support in some upcoming release of R#. I don’t want JetBrains to think we are ungrateful for CSS support in v6 though. Quite the contrary. We are ecstatic about CSS and JavaScript support. Thank you JetBrains!

    @Roland: As a side-note, using .less files in your project will eliminate the need to see or remember all the colors used in your style sheets. With less you would just create variables for your colors (i.e. @primaryColor, @secondaryColor, etc.), then just use them throughout your styles. You can even use them as the base for other colors (i.e. background-color: lighness(@primaryColor, -25%) will give you a color that is 25% darker than @primaryColor).

    Thanks again JetBrains!

  24. Avatar

    bdaniel7 says:

    February 21, 2011

    I’m soo looking forward to get it.

  25. Avatar

    Jesse says:

    March 15, 2011

    Another vote here for for .LESS support.

  26. Avatar

    bob says:

    March 29, 2011

    File Structure and Find Usages are very cool on supporting CSS ! But I had a lot of CSS files in Project and I don’t know how many .classes haven been used. Finding usages one by one still takes too much times. Could you sense it automaticly and make the useless class in gray color or something like that, just like you do in cs files. This action may take a long time, so you can also make this as a scan function way instead of IntelliSense way.

    Thank you JetBrains!

  27. Avatar

    Jura Gorohovsky says:

    March 29, 2011


    Thanks for your input!
    We’re looking to implement highlighting for unused classes. Not sure if this will make to the initial 6.0 release but this is definitely on the radar for us.

  28. Avatar

    Tom says:

    April 18, 2011

    Hey Guys,

    Definitely would be awesome if you could create a “CSS Sweep” feature that basically compares CSS files to all classes used in *.aspx pages in the solution and then automatically lists the unused ones so you can remove them ?

    Currently, we have huge CSS sheets of >5000 lines and finding unused classes is a massive pain. There isn’t any plugins or known features I know about that would enable you to easily “cleanup” your CSS style sheets so ANYTHING you can add which would make this automated would be a HUGE +1.


  29. Avatar

    Dusan says:

    April 22, 2011

    One more vote for .less support. I use less in all my projects now.

  30. Avatar

    Jason says:

    July 5, 2011

    LESS support would make this feature more useful for me.

  31. Avatar

    Anthony says:

    July 13, 2011

    Another +1 for LESS integration.

  32. Avatar

    GeorgeR says:

    July 21, 2011

    Seconding the LESS support request. I just starting using it, serving it up via LessCoffee. It’s easy as pie and really cuts down the duplication and clutter. I’d be willing to shoot over my sandbox project.

  33. Avatar

    Sergey says:

    January 19, 2012

    +1 for SASS

  34. Avatar

    Egor says:

    January 26, 2012

    +1 vote for Less. Please guys!

  35. Avatar

    Daniel Liuzzi says:

    December 24, 2012

    And yet another +1 for LESS support.

  36. Avatar

    Yair Nevet says:

    January 16, 2013

    ReSharper CSS class name renaming not work propetly.

    Make sure you find & replace class=”className”

  37. Avatar

    lesscss says:

    March 23, 2013

    good work….

Discover more