ReSharper provides the following code analysis and coding assistance features for CSS file.
ReSharper highlights selectors, properties and values of properties, at-rules (such as
@media), functions that can be used as property values,
pseudo-classes, etc. Default syntax highlighting for CSS:
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).
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.
When ReSharper detects an error, it highlights it with a curly red line. You can hover the pointer over
the error to display
its description as a tooltip. For more information and other ways to find out why your code is
Since ReSharper has its own code inspections, you can specify whether to display them as
For more information about configuring inspections, see
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.
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:
Examples of Quick-Fixes
Switch validator to CSS [version number] version
Each CSS version brings new properties. ReSharper helps find the properties that do not fit the current CSS version that is specified for your project and provides the following quick-fix to change the version easily:
If there is a class name that does not have the corresponding style rule, ReShaper highlights such name and provides the following quick-fix.
After applying the quick-fix, the corresponding class selector and empty declaration block are inserted.
If there is a
style attribute that contains style
information for the current element and there is a
class attribute with a name, that is not
used as a class selector in the corresponding style sheet, then ReSharper detects such
situation and offers the following quick-fix.
After applying the quick-fix, the appropriate style rule is added to the corresponding style sheet.
Examples of Context Actions
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:
- Place the caret at a property, function, pseudo element, pseudo class or media feature in CSS file or markup file.
- 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:
If you need some extra information, click read more to navigate to the specification directly.