Using “Go to Symbol” in a Texmate CSS File

CSS files have a tendency to get unruly - I feel like I'm always scrolling up and down the file, even when I have it nice and organized by section, just to find a section. Sure, sometimes I bring up the Find dialog. Using the keyboard shortcut of Apple+f is handy enough. But when I started working with Drupal, I found a better way.

Drupal uses a style of commenting that I haven't used much before, called Doxygen:

/**
 * Your comment text
 */

I like this quite a bit - not only is it nice and clean looking, but software has an easy time picking up on it (such as for generating documentation). It can be used to comment in both CSS and PHP.

In the following screenshot/example, you can see how Textmate picks up on this, and adds the comment text to the symbol menu in the lower right corner:

So now, not only can I access every CSS rule via this symbol pop-up menu, but I can access my sections as well. For those of us that don't like to switch to the mouse, you can bring up the go to symbol pop-up box with the Shift+Apple+T keyboard shortcut, then start typing into the Filter box what you're looking for. In this example I started typing "right" and since my Right Oriented Section starts with an asterisk, it jumps right to the top:

Then I just press Enter, and it jumps to that point in the file for me, with the cursor right there too.

Anyways - so there you have it!