AVERYVERY

Folding CSSedit Groups in Textmate.

HEY DEVS

Are you tired of designers who use CSSedit to make up for disorganized thinking? Are you tired of reading things like “@group -links”  that do nothing to add to your understanding of the file’s structure?

CSSedit’s groups are great in CSSedit, but annoying everywhere else…you can’t use them to navigate, they don’t describe things well, and they make moving code around more challenging. But with a quick modification, you can start using them to neatly fold code.

Open your Bundle Editor, go into the CSS language, and replace the folding start and stop markers with this:

foldingStartMarker = ‘(/\* @group .+ \*/|\{)’;
foldingStopMarker = ‘(/\* @end \*/|\n[^\{]+\}|\})’;

From now on, Textmate will fold by CSSedit’s @group structure, allowing you to quickly view and understand the byzantine monstrosity that is a CSS file (hint: Apple+Option+0 will immediately fold all the top level groups, giving you a quick map of the file).

(Note: Due to the “fun” way that Textmate’s folding markers work with regex, this fix doesn’t take into account all of the ways CSS rules can be opened and closed. Break your closing brackets down to their own line, as God intended, or face the consequences.)