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.
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:
<Content Include="Embedded\Content\Help\Site.css" /> <Content Include="Embedded\Content\Help\Site.min.css"> <DependentUpon>Site.css</DependentUpon> </Content>
The Web Essentials features section has details on all the goodies packed in – I encourage you to explore these.