Getting More Out of CSSEdit Part 1: Groups
August 6th, 2008Rob Soule from Viget Labs posted some ideas on organizing your stylesheet using CSSEdit back in May. Specifically regarding the grouping functionality in CSSEdit and the Viget approach to nested groups. It’s a simple, yet very logical approach in which they put an equals sign in front of parent @group names and a dash in front of child @group names. Personally I achieve the same thing by putting the names of parent group in all caps and the names of child groups in title case. Either way, there are a lot of little things you can do to further organize your CSS files with CSSEdit.
I just recently came across Rob’s post and it reminded me that I’ve been meaning to share some of my CSSEdit tips and hacks for awhile now. So here goes…
Making Groups More Distinguished
The grouping feature in CSSEdit is really fantastic. If you’re not using CSSEdit, the group comments are just harmless little comments, but they’re not all that helpful. In my opinion they’re easy to miss when you’re skimming through a CSS file whether you’re in CSSEdit or not.
The screenshot above shows the default group comments. Below is the approach that I’ve been using to help differentiate groups:
Whether you’re using CSSEdit or any other text editor, you can see the groupings much better now with the added equal signs and dashes. I chose equal signs and five extra characters to give the starting group comments more visual weight than the ending group comments. I also add the group name (in this case “Forms”) to the ending comment as I find it quite helpful to know what exactly is ending.
Now I’m sure some people will just see this as adding extra weight to their CSS files. I can’t really deny that, but when you’re working in an environment where your CSS may change hands and will likely need occassional maintenance over time, it’s a trade off I’m willing to accept.
I’d love it if CSSEdit had a preferences setting for adjusting the default @group and @end comments, but I’ve yet to find it or figure out a hack. I’ve also sent an email to the folks at MacRabbit with my suggestion and am waiting to hear back.
I use a method of grouping that is different yet, but would like to add something like this to my files to add an additional level of grouping. Currently I just group by topics. i.e. resets, header, comments, or forms. I could see that adding distinguishing attributes like caps could help make it more clear. I don’t use cssedit but might give it a whirl just to see how it works :)
@Mark - I think you’ll really like CSSEdit. After finding Coda to be disappointing, I switched to TextMate for all my text editing needs and am absolutely amazed by all of its capabilities… but I’ve got to have my CSSEdit for CSS work. Especially since I’m neck deep in CSS for most of the working day.
Next time we see each other, I’d be happy to give you a demo =)