Introducing CSSCop - FxCop for stylesheets

Dec 8, 2011

Writing correct CSS can sometimes feel a little frustrating – especially with all the vendor specific properties and cross-browser techniques we need to be aware of. CSSCop for Visual Studio tries to help us write better CSS, by making sure we remember all the right vendor specific properties or that you cannot set the margin on inline HTML elements etc.

CSSCop uses the best CSS linting tool available today – CSS Lint. Like FxCop will frustrate you the first time you run it, so promises CSS Lint, which state: “[CSS Lint] Will hurt your feelings* (And help you code better)”.

You might find a lot of errors when you run it the first time, but very quickly you learn the rules and will start coding accordingly.

All the rules can easily be turned on and off in an XML file that is placed in the root of you project the first time CSSCop runs. It doesn’t impact performance in any way since it only activates when you manually invoke it.

I hope that you will give it a try and tell me what you like and dislike about it.

* $4.95/month ASP.NET Hosting with FREE SQL 2012 DB! – Click Here!

Combine multiple stylesheets at runtimeI often use multiple stylesheets in a single website to keep things nicely separated. The only probl...Running FxCop and the quirksUsing FxCop can bring pain if you don't know the quirks and what to ignoreUse FxCop with ASP.NET 2.0The build process in ASP.NET 2.0 is very different than in ASP.NET 1.x, because it does not prod...

Comments (17) -

John Papa

12/8/2011 6:43:07 PM #

Fantastic so far! It already found a bunch of little things for me, even some duplicate properties (oops). A few feature requests below:

1) Feature request: Add a dialog for settings/options under to the Tools menu for CSSCop (like JSLint does). So we can turn features on/off without the XML file.
2) Feature request: Allow right-click on an open CSS file and choose CSSCop from the popup menu
3) This is an annoying message. Would be great to be able to change an individual "warning" like this to a "message" or ignore it altogether by right clicking on it in the CSS page or in the Error List, like Resharper allows.
Using width with padding can sometimes make elements larger than you expect.

Mads Kristensen

12/8/2011 6:58:44 PM #

Great suggestions. I definitely want to get the right-click working in an open CSS file. The other ones are doable, but a little harder to get right. Thanks for the feedback!!

Aaron Powell

12/8/2011 7:04:04 PM #

Mads - what's your take on the naysayers to CSSLint, such as http://mattwilcox.net/archive/entry/id/1054/ ?
There are some very good points that are raised in that post, especially the point that you can't improve CSS performance that's entirely dependent on the browser engine and not the stylesheet.

Mads Kristensen

12/8/2011 7:31:18 PM #

I think Matt Wilcox is absolutely right when he says that CSS linting is useless when it comes to performance optimizing CSS. We use tools like minification, bundling and gzip'ing for that.

If you instead think of linting as guidelines for consistency, best practices and browser compat, then it makes perfect sense. I see linting as exactly that - much like I see and use FxCop. I turn off the rules that I don't like and keep the ones I do.

Andrew Westgarth

12/9/2011 1:38:33 AM #

Hi Mads,
fantastic extension and I am looking forward to making use of it a lot. However I have created a vanilla web app and then ran CSSCop and I am getting the following error in the Warning List: -

Fatal error, cannot continue: Object doesn't support this property or method

It appears to be hitting this on a comment line at the top of the default Site.css file.

Any ideas?

Mads Kristensen

12/13/2011 2:59:48 PM #

This issue is fixed in version 1.1

Jannik

12/9/2011 4:17:52 AM #

Hi Mads,

I get an error for each file CSSCop tries to examine:

"Fatal error, cannot continue: Objektet understøtter ikke denne egenskab eller metode" ( or "Object does not support this property or method", I guess ).

Am I blind, or is there no obvious place to report these kinds of issues on the VS Gallery site?

Best regards,
Jannik

Lars

12/9/2011 5:15:47 AM #

Hej Mads,

Jeg oplever det samme som Jannik - kan det være et problem, at den eneste dll-fil er "CssLint.dll" i mappen
[...]\Lokale indstillinger\Application Data\Microsoft\VisualStudio\10.0\Extensions\Mads Kristensen\CSSCop\0.9\
- jeg havde nok forventet at der også ville være en "CSSCop.dll" eller lign.?

Mange hilsner,
Lars

Marco

12/9/2011 7:02:07 AM #

Same error here: "Fatal error, cannot continue: Object does not support this property or method". The css file parses fine at csslint.net. Otherwise, a great extension (to the toolbox).

Mads Kristensen

12/9/2011 7:55:58 AM #

This is odd. I believe it has to do with the JavaScript execution. Do you have IE9 installed?

Andrew Westgarth

12/9/2011 7:57:34 AM #

Not at present, it's on a relatively new Win7 Ultimate build running IE8 as not had chance to upgrade yet.

Mads Kristensen

12/9/2011 7:59:06 AM #

Please let me know if it works after you've upgraded to IE9. I have a feeling that might be it.

Thanks!

Andrew Westgarth

12/9/2011 8:10:39 AM #

That appears to have done the trick. I've also ran the extension on another machine with IE9 installed to double check. I now have CSSCop goodness working - fantastic extension!!

Mads Kristensen

12/9/2011 8:11:12 AM #

Awesome. Thanks for testing it out. I've updated the download page with Requires Internet Explorer 9 to be installed

Kamran

12/9/2011 9:42:33 AM #

Mads, do you ever sleep? Another essential extension! Perhaps it should just go into Web Essentials. Then can you do some registry lookup to determine if IE9 is installed (and hide accordingly if it's not available)?

Atul Sirpal

12/14/2011 8:23:11 PM #

Great tool....
One question in my mind is that whether it will check duplicate css classes and it will check inline style on controls?

Thanks Mads !

Mads Kristensen

12/15/2011 6:57:33 PM #

Atul, it does check for a lot of things - all of them listed here http://csslint.net/

This current version of CSSCop doesn't check inline styles at all, only .css files. This will be added in a later version.

Comments are closed

Introducing CSSCop - FxCop for stylesheets

Related posts

Comments (17) -

About the author

Twitter

Month List

Disclaimer