Web developers have been plying their trade for long fighting with browser incompatibilities, lack of tooling support in editors or their IDE environments. My favorite IDE – Visual Studio – is otherwise brilliant at what it does but I sometimes missed support for writing CSS – especially when implementing vendor specifics, validating standard properties Or common operations like minifying a CSS or JS file.

Enter Web Essentials – the holy grail of web devs (at least the mere mortal ones like me). You get your copy of this extension from the downloads page and then code your way to happiness!

Once you have it installed, you get a nice “Web Essentials” context menu on items that come under the purview of the extension. For example, to minify a CSS, all one has to do is this:

Right click on the CSS file name in Solution Explorer and choose Web Essentials from the context menu:

Now click on the “Minify CSS file(s)” and Web Essentials will create a minified version of the file(s). What’s more – Visual Studio adds the minified file as a “dependent” file so whenever you edit your primary CSS file, the minified one would be updated instantly. If you look up the .proj file of your project, it would have the following setting: