My favorite CSS editor – Visual Studio .NET

Using WordPress as back-end engine for the site requires creating and maintaining CSS layout files, as the one that ships with the engine by default is a bit too lame to be considered seriously (no offense to authors of otherwise great product). Hence I’ve been searching for a good CSS editor, and I think I have finalized on the one I really like. The natural tendency to evaluate Microsoft products was to look onto their flagship product – Microsoft Frontpage – since if Microsoft had something decent to offer, they would undoubtedly offer that in their premier Web authoring tool.

I was wrong. While FrontPage mostly sucks at editing CSS files, Microsoft’s Visual Studio .NET built-in CSS editor is just what’s needed. Fast access to major properties of a stylesheet, ability to preview as you edit, IntelliSense auto-complete for styles as you type. Eight tabbed screens help to work with specific CSS styles.

The screen above allows the designer to set the font properties of the style. The little preview pane allows you to see what the text will look like, but if you need to test a variety of different color combinations, you’ll need to set up background first.

The same goes for text alignment.

Positioning tab would be helpful for anyone trying to play with the exact location of the objects on the page. Alas, the preview pane disappears, so you will have to preview in browser, to see whether the changes had the effect you expected.

The same goes for flow control – there’s no clear way to see changes made, so a browser preview is required.

The Edges tab is excellent, as it has the precise controls for borders, margins and padding for CSS styles, which in my case happen to change a lot as I experiment with the design. The drawback here, however, is that Visual Studio.NET will not follow the short-hand notation for defining padding, borders and margins globally. Unless you edit by hand, you will not get a simple directive such as

border: 2px solid black;

It will have to be:

border-top: 2px solid black;
border-left: 2px solid black;
border-bottom: 2px solid black;
border-right: 2px solid black;

Which is not good if you’re trying to design optimized CSS.

Also notive how the preview pane suddenly gains new functionality, and while you cannot see the example of the page you’re working on, Visual Studio at least tries to tell you what the changes will look like. The preview reappears though in the Lists tab.