CssCop brings CSS Lint functionality to Visual Studio
I have adopted Atom as my de facto text editor, though I still spend a lot of time in Visual Studio. Like all great IDEs, Visual Studio is easy to extend with the available tools and add-ons. Tools such as FxCop allow you to quickly analyze your code, while the CssCop extension provides the same functionality for CSS code.
We take a look at getting the CssCop add-on and its benefits. We start with an overview of the CSS Lint tool and the process that is at the heart of CssCop.
Behind the scenes
One caveat of working with CSS is it is hard to validate syntax and formatting without viewing results in a browser. However, often rules are not applied as expected, and you are forced to dig through source code with the help of browser tools like those available with Chrome.
A lint tool performs static source code analysis and points out patterns that might be an error or cause problems. JavaScript developers can use JSLint, and those working with CSS can use CSS Lint. You can easily use the CSS Lint website to check code -- just pass your CSS in the text box on the home page and click the LINT! button (Figure A).
Figure A
The CSS Lint website identifies possible problems.
Figure B shows sample output for a small chunk of CSS. CSS Lint offers pointers about possible problems with your stylesheet source code; it does basic syntax checking and applies a set of rules to the code that look for problematic patterns or signs of inefficiency.
Note: Everything CSS Lint points out as a problem may not be one -- the key to the process is the rules, which you can edit to choose which ones are enforced.
Figure B
CSS Lint results for a sample CSS snippet.
Visual Studio integration
CssCop brings the CSS Lint functionality to the Visual Studio environment, so you can check your CSS code without leaving the IDE. It is available as a Visual Studio Extension, which can be installed within the IDE (Tools | Extensions and Updates menu and search for CssCop) as shown in Figure C, or you can download and run it directly from its website (Figure D).
Figure C
Adding the CssCop extension in Visual Studio.
Figure D
Downloading and installing CssCop from its website.
Once installed, the CssCop feature is available when working with CSS files. You right-click a CSS file in the Solution Explorer and choose Run CSSCop from the context menu (Figure E). The results of the CssCop process are shown in the Error List tab of the results section of the Visual Studio interface, as there is an obvious error shown in Figure E (missing colon).
Figure E
The CssCop feature is available via the context menu on CSS files.
Errors can be cleared by fixing and saving the code and rerunning CssCop; however, CssCop errors are only guidelines, as they do not always mean that the specified error is causing problems. A good example is the error list generated in Figure F when CssCop is run on the Bootstrap CSS file being used on my BitBucket site -- notice CssCop lists 452 warnings for the source file. This is the actual source file from the Bootstrap folks, so I will not attempt to "fix" any of their perceived issues. My intention is to not say CssCop is not useful, as it certainly is when you are having issues and need assistance with analyzing your CSS.
The key feature of CssCop is its rules, which you can edit to fit your needs. The first time CssCop is executed on a Visual Studio project, it generates an XML file (csslint.xml) in the root of the solution directory. The file and directory structure are shown in Figure F. It is standard XML, so you can change the setting for any rule (true or false) to signal whether it is enforced on your source code. The CSS Lint Git project has more information on each of the rules.
Figure F
Rules used by CssCop located in the csslint.xml file.
Assistance tracking down issues
I know a number of developers and designers who do not like CSS Lint, because they do not want to be told how to construct their CSS, but like most things developer-related there are plenty of others who love it.
While I do not view the tools as an oracle when finding errors, it is useful to point out potential problems, and I appreciate any help I can get. The ability to disable and enable rules as needed is another added benefit. I like using the tool alongside browser debugging tools to track down issues with how CSS formatting is being applied.
CSS Lint has been around for years, so integration with Visual Studio is a nice option.
Are you using CssCop and/or CSS Lint? If so, tell us what you think of the tools.
