Aloe Studios

Rob 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.

Further Reading

If you’re into CSSEdit, you might be interested in this hack for adding CSS3 support and more to CSSEdit: Getting More Out of CSSEdit Part 2: Editing the Auto Completion Plist. You can find my other CSS related posts in the Archive.

end