CSS speed typing for Visual Studio

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.

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

Pingback from xaviercompany.es Visual Studio 2010 - Extension desarrollo web