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.

contextmenu

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.

screenshot

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.

Comments

John Papa

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.

John Papa
Mads Kristensen

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!!

Mads Kristensen
Aaron Powell

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.

Aaron Powell
Mads Kristensen

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.

Mads Kristensen
Andrew Westgarth

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?

Andrew Westgarth
Jannik

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

Jannik
Lars

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

Lars
Marco

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).

Marco
Mads Kristensen

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

Mads Kristensen
Andrew Westgarth

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

Andrew Westgarth
Mads Kristensen

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

Mads Kristensen
Andrew Westgarth

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!! :)

Andrew Westgarth
Mads Kristensen

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

Mads Kristensen
Kamran

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)?

Kamran
Atul Sirpal

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 !

Atul Sirpal
Mads Kristensen

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.

Mads Kristensen

Comments are closed