TextMate Tip for CSS — Single Line Overview

CSS files need to be formatted so they are readable at two levels: the broad level of scanning the document selectors, and the finer level of locating individual property rules within selector blocks.

I’ve tried several ways of formatting my CSS to balance these two views, without much success. I’ve tried indenting rules based on their place in the document hierarchy, or making heavy use of summary comments to facilitate searching, broken groups of selectors over several cumbersome files and used single line selector blocks. None of these techniques helped tame unruly CSS files once they exceed a few hundred lines.

That last technique though, of using single line selector blocks, does help with the broad level view, but renders the property rule level unreadable. I still want each property on its own line. How do I achieve both views?

Code folding in TextMate

TextMate for OS X (and probably other quality text editors on other platforms) has the ability to fold blocks of code, collapsing each block except for their first lines. Doing this to a CSS file (Alt+Cmd+0) leaves just the document selectors on single lines, temporarily hiding their property rules. This is perfect for scanning through a large file to locate a specific selector. When it’s time to focus on the finer level of detail, the block can be revealed by toggling the selected block (F1 or clicking the arrow in the gutter). When you’re finished, toggle it back up again. As there is only one or two blocks unfolded at a time, it’s very easy to focus on the code without getting lost.