CSS Commenting With Textmate

Last month Jina Bolton wrote an excellent article about Sexy Stylesheets on Think Vitamin. I was particularly impressed with some of the ideas for commenting more efficiently. The problem was, even after knowing the techniques, I was too lazy to comment consistently. That’s where TextMate came in handy.

My CSS Comments Bundle For Textmate

I was surprised that there was nothing in the included CSS bundle for basic commenting so I took the liberty to write one. I also made tab triggers for all of the techniques shared in Jina’s article. It’s broken down into five snippets:

Comment: a traditional CSS comment.
Section: I chose to use the section flagging technique as mentioned in Jina’s article.
Colors: a reference table for defining hex colors used in your stylesheet. This was mentioned by Jina which she accredited to Steve Smith.
Declare: a wordpress theme declaration. I found this to be a substantial way to define a stylesheet while following an established best practice by the wordpress community.
Updated: this is the timestamp technique mentioned in Jina’s article.

I prefer to use the declare snippet on my main stylesheet and the updated or timestamp on all of my included child stylesheets. This bundle has been in use by me for three weeks now and I’ve actually found it to help me a lot. Putting in comments for organizational purposes; I’d be too lazy to do it without this. Your mileage may vary with the bundle, but I hope you find it useful too.

Download My CSS Comments Bundle for Textmate

12 Responses to This Article.

Patrick Says:
9:21 amJan 07

Thanks for this excellent bundle.
Julian Schrader Says:
9:38 amJan 07

Thanks, this is great!
The Brian Shaler Blog » ReadPhoenix: Top Blog Posts of the Week #4-5 Says:
3:51 pmJan 12

[...] Blog: DontTrustThisGuy.com Author: Jim Jeffers Company: Sitewire Post Title: CSS Commenting With Textmate [...]
WMS Says:
5:10 amMar 24

Sweet tutorial, just what I have been looking for.
I have added you to Stumbleupon.
Jim Jeffers Says:
7:45 amMar 24

@WMS - Thanks!
Ikki Says:
4:08 pmMar 30

Great tutorial indeed I’ve bookmarked it for future references! Thanks for sharing this stuff!
Don Says:
1:25 pmJul 20

Commenting is key in any design firm especially when multiple developers work on the same project, thanks for the tutorial!
Modified CSS Bundle for TextMate — The Only James Says:
5:30 amJul 30

[...] you’re coding for the web you’ll probably have at least tried out Jim Jeffer’s CSS Bundle, which was inspired by an article by Jina Bolton. If not check it [...]
James Conroy-Finn Says:
5:38 amJul 30

Thanks for sharing Jim!

I like the plugin. I did tweak it slightly as it required me to keep typing the current date and time as well as my name when I added “updated” comments. I’ve blogged the changes I made (you can find them at http://www.theonlyjames.com/2008/07/tm-css-bundle-mod/) and pasted my amended “comment: updated” snippet below.

/*
${1:Working Title}
Updated: ${2:`Date +’%a’`} ${3:`date +’%d/%m/%Y’`} @ ${4:`date +’%H:%M:%S %Z (%z)’`}
Author: ${5:`dscl . -read /Users/$USER RealName | awk ‘NR==2 { sub(/^[ \t]+/, “”); print }’`}
—————————————————-*/$0

Hope you don’t mind me linking to your post.
Jim Jeffers Says:
12:08 pmJul 31

Hey James,

Thanks for the revision! I’m going to update the bundle with your revision tonight. That’s great!
Richard Says:
5:25 pmAug 19

Thanks for this bundle this is great.
Tech Tutorial Says:
10:41 amApr 03

Thanks for the revision! I’m going to update the bundle with your revision tonight. That’s great!Commenting is key in any design firm especially when multiple developers work on the same project, thanks for the tutorial!Thanks for the revision! I’m going to update the bundle with your revision tonight. That’s great!

Dont Trust This Guy why not take my word for it? A blog by Jim Jeffers