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!

This entry was posted in How-To's, ReSharper Tips&Tricks and tagged , , . Bookmark the permalink.

37 Responses to CSS Support in ReSharper 6

  1. Peter says:

    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. @Peter
    Thanks!
    The refactoring that you’re talking about is in the Grand Plan :)

  3. Roland says:

    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. @Roland
    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. Andy Alm says:

    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. Roland says:

    @Jura

    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. @Andy
    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?

    @Roland
    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: http://youtrack.jetbrains.net/issue/RSRP-215153

  8. sync says:

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

  9. Andreas says:

    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. Andy Alm says:

    @Jura
    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. @sync
    We’re not planning to integrate zencoding into the main product.
    Do you experience any difficulties using it via a powertoy?

    @Andreas
    Please vote for the feature request then: http://youtrack.jetbrains.net/issue/RSRP-215153
    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.

    @Andy
    I’ve created a feature request regarding LESS. Please vote: http://youtrack.jetbrains.net/issue/RSRP-215161

  12. Simon Bartlett says:

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

  13. Will Holley says:

    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. Ɓukasz Podolak says:

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

  15. Quentin says:

    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. Rob says:

    +1 for dotLess support. I use it extensively. I then convert it to css files either via T4 (http://haacked.com/archive/2009/12/02/t4-template-for-less-css.aspx and http://blog.waynebrantley.com/2009/12/ultimate-automatic-stylesheet-combining.html) 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. Mike says:

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

    Fingers crossed :)

  18. w0ut says:

    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. Dan Sargeant says:

    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. @w0ut
    Thanks, I’ll pass your suggestions to the developers. No commitments yet though.

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

    @Mike
    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 http://youtrack.jetbrains.net/issue/RSRP-215161

  21. Stacey says:

    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. @Stacey
    Thanks for a leading candidate for the Comment of the Year :)

  23. Matt S. says:

    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. bdaniel7 says:

    I’m soo looking forward to get it.

  25. Jesse says:

    Another vote here for for .LESS support.

  26. bob says:

    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. @bob

    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. Tom says:

    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.

    Thanks

  29. Dusan says:

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

  30. Jason says:

    LESS support would make this feature more useful for me.

  31. Anthony says:

    Another +1 for LESS integration.

  32. GeorgeR says:

    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. Sergey says:

    +1 for SASS

  34. Egor says:

    +1 vote for Less. Please guys!

  35. Daniel Liuzzi says:

    And yet another +1 for LESS support.

  36. Yair Nevet says:

    ReSharper CSS class name renaming not work propetly.

    Make sure you find & replace class=”className”

  37. lesscss says:

    good work….

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>