Stephen Rushing

I’ll probably post more on this later, but I just want to get it up for now.

Sometimes my CSS gets auto-formatted, which adds a whole bunch of “clutter” space that I don’t want. I find CSS easier to read when there is a visual hierarchy of the selectors and the HTML elements they represent, and if there is consistency in the order of the selector attributes.

The following CSS Formatter will place all of your selectors and their contents on a single line, and sort their attributes alphabetically.

For instance…

div#whatever, div.whatnot {
display:block;
background:transparent;
float:left;
}

becomes…

div#whatever,
div.whatnot {background:transparent; display:block; float:left;}

The formatter will IGNORE any space outside of the selector and its contents.

Try it out here:

http://blog.stephenrushing.com/wp-content/uploads/2009/02/cssFormat/cssformat.html

This tool allows you to select a block of HTML, then customize CSS selectors for each of the child elements. The resulting block of CSS is considered “modular”, in that the corresponding HTML must follow a particular structure. Yes, this is already the basic concept behind CSS selectors, but stylesheet selectors tend to be much more vague and unorganized. This allows you to control and recognize the scope of styles much more easily.

• View the sample
• Download jQuery.selectorInspector

This tool also makes use of jQuery.paneSizer.