Introducing CSSCop - FxCop for stylesheets
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.
Comments
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 PapaGreat 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 KristensenMads - 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 PowellI 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 KristensenHi 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 WestgarthHi 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
JannikHej 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
LarsSame 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).
MarcoThis is odd. I believe it has to do with the JavaScript execution. Do you have IE9 installed?
Mads KristensenNot at present, it's on a relatively new Win7 Ultimate build running IE8 as not had chance to upgrade yet.
Andrew WestgarthPlease let me know if it works after you've upgraded to IE9. I have a feeling that might be it. Thanks!
Mads KristensenThat 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 WestgarthAwesome. Thanks for testing it out. I've updated the download page with [b]Requires Internet Explorer 9 to be installed[/b]
Mads KristensenMads, 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)?
KamranThis issue is fixed in version 1.1
Mads KristensenGreat 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 SirpalAtul, 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 KristensenComments are closed