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!
hi
this looks great, but how can I do a shortcut to generate this style of comment in textmate?
currently i do either command-/ or command option -/ and get block style. Not sure how to force this to doxygen styled comments in my CSS files?
Excellent question - no idea how to do it in TM, but this is where the beauty and ease of TextExpander comes in (if you’ve never heard of it, I recommend checking it out). To do this, I just created a custom snippet, like so:
/**
* %|
*/
I then setup the snippet so that whenever I type “doxcom”, the above is inserted.
The “%|” is where I want the cursor placed after the insertion, so I can enter my comment. I have all sorts of CSS shortcuts setup in this manner, and TextExpander has a bunch built in already.
http://www.smileonmymac.com/TextExpander/
Cheers, and thanks for stopping by!