Getting More Out of CSSEdit Part 1: Groups

August 6th, 2008

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.

Posted in: css & Tagged: , , ,

2 Comments »

Previous Posts

Tasty Redesign

I’m still getting used to the big change, but I think the Delicious.com redesign is pretty sweet. They’re also calling themselves “Delicious.com” rather than “del.cio.us” - smart move, I can never type that correctly the first time…

Jul 31st, 2008 (1 Comment)

Tags: , ,

Posted in web design

At last, a Logo

A new logo for Aloe Studios. About time

Jun 5th, 2008 (4 Comments)

Tags: , ,

Posted in Aloe Studios

Downtime

A bit of time away from the blog while searching for design inspiration.

Apr 4th, 2008 (3 Comments)

Tags: , ,

Posted in Aloe Studios

Web 2.0 is NOT a Design Aesthetic

Web 2.0 is a description of function, not a description of form.

Jan 14th, 2008 (2 Comments)

Tags: , ,

Posted in web2.0

Aloe Studios runs on WordPress and is hosted by LunarPages.