17 Comments

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

Comment by 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.

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

Comment by 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.

Comment by 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?

Comment by 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

Comment by 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

Comment by 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

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

Comment by 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

Comment by 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