For the past few months, I’ve been looking at how to improve the web development experience in Visual Studio. This summer I released the Web Standards Update which brings HTML5 and CSS3 to Visual Studio, and a few weeks back Web Essentials was published.

This week I’ve been working on a proof of concept that eliminates the need for typing curly braces, colons and semi-colons when working with CSS. In non-English keyboard layouts, these characters can be rather difficult to type, because you need to use SHIFT and ALT to get to them.

Here is a quick demonstration of how to write CSS without the need for these characters.

I’ve been using this for about a day now on an English keyboard and I am so much more productive writing CSS. What I’m really interested in though, is whether or not YOU are when using this extension. Also, is it annoying, in your way, a waste of time, or the best thing EVAR!! Please try it out and let me know. I’d appreciate any feedback on this. Thank you!

Try it today!

Download the SpeedTyping extension for Visual Studio 2010 and let me know what you think on Twitter

Who knows, we might add this to the next version of Visual Studio…


Comment by Brennan Stehling

Typing faster can be a big help, but well over 80% of my time in CSS will be in making sense of a mess that was created long before I arrived. Today I worked in a CSS file which was over 3000 lines long and assembled over the past year by multiple contributors. If I were to define a set of killer features it would be to better make sense of a complex CSS file. Being able to relate files like you can with JavaScript files would be helpful. Being able to tell the editor how this CSS file relates to others which are in the project locally and even remotely would be very helpful. One difficulty with CSS is side effects due to conflicting selectors, possibly because you did not know that a class selector was specifying a width and you thought the class name you just created was already in place somewhere else in the CSS file you are editing or even in another file entirely. It would be a huge help to show a window alongside the CSS editor which would show these complex relationships and help point out how the current selector and ruleset relates to what else is there. When you can help the developer conceptualize a large CSS file that would truly cut down on their work load because I really find myself reading CSS that I ever do in writing it.

A secondary feature I would then leverage with these features is to break up blocks of CSS into separate files which can later be assembled into a single file without difficulty. I recently leveraged AjaxMin from Microsoft to power an MVC Controller which assembled a set of CSS files into a single output file for use live on the web site. During development the developer can have the CSS outputted without minification to assist with debugging layouts and once it is deployed the CSS (and JS) would be minified. The extra benefit of this approach is that I can break sections of CSS coding into separate files, document the techniques which are being used even with links to blogs about those techniques, which are then stripped out when the CSS is minified. I find this greatly speeds up development because the developer can organize the CSS better and document workarounds which are still very much necessary for a wide range of desktop and mobile viewers.

Then there is Less which may mix this up a bit, but a workflow to also work Less into the mix would be great. So far I have not bothered with Less because I do want syntax support from my IDE. Once I am satisfied that I can get great support for Less I will switch to it in a heartbeat. But if I could mix legacy CSS with Less so that I can get the features I listed above I could really work Less into my projects more easily and greatly simplify my work and really focus on the real features of the web site instead of the complexity of a garbled mess of CSS.

Brennan Stehling

Comment by Mads Kristensen

Huge stylesheets are always an issue to maintain. I'm planning to add some sort of refactoring to Web Essentials to help this. Also a CSSCop would be very helpful in this regard.

LESS support is already in the extension gallery. Search for Web Workbench by Mindscape. Web Essentials play nicely with both LESS and SaSS when using Web Workbench