CSS organization tip 1: Flags

Do you write and manage large CSS files? Ever get tired of scrolling up and down in search of a specific rule or set of rules? The CSS files I work with for client projects are often quite long, requiring constant scrolling up and down several screen’s worth of text to alter rules or add new ones. While working on a current project, I just made a tiny little addition that makes finding what I want almost immediate.

Grouping your CSS rules

I briefly touched on CSS organization a couple months ago. As a bit of background, if you’ve ever taken a look at any of my style sheets, you’ve probably noticed that I always divide them into key sections. In every project I create, I typically have sections in the CSS broken out for the following:

• Header
• Structure
• Nav
• Search
• Headings
• Lists
• Forms
• Links
• Misc

When I was learning CSS in 2002 before the Wired News redesign, I devised my own means of using commented text and a series of dashes as headings to make these sections easily distinguishable:

/* Navigation
----------------------------------------------- */

This makes it fairly easy for me — or a client who takes over the files — to find certain rules, or to know which rules affect a relevant portion of the design. Even more importantly, this method of organization saves a lot of time when troubleshooting any style sheets I’ve written, especially for older projects where memory of how a project was built might be fading.

Finding those sections quickly

So how to find rules quickly when you’re working? Some apps allow you to set markers in documents, allowing quick key-command access to that section. Great if you’re into that kind of thing, but it can get tedious to do with every new CSS file.

You could also do what I’ve been doing for the last few years: use your text editor’s FIND command to do a quick search for a certain block of text. But if your style sheets are anything like mine, a generic search like “nav” or “h2” might point to several places in the document, requiring several FIND NEXTs (or many) to actually find what you’re looking for.

A fictitious, but even better example of FIND not finding what you want immediately: Say you have a section of your site you’ve abbreviated with the acronym “RDE”. So you label a portion of your CSS with:

/* RDE
----------------------------------------------- */

Great. So you can easily see the rules that apply to the RDE section. Except that if you want to use FIND to zoom to that section, you quickly notice that your text editor finds every instance of the following property:

#nav {
  float:left;
  width:182px;
  border-top:1px solid #911;
  }

A simple fix: Flags

As I discovered yesterday, if I add a simple flag immediately before the commented header text — like the “=” character, one that’s not used in CSS or class/id syntax — I have a simple text-based hook for finding (and zooming to) that section header immediately. So a quick FIND for “=rde” yields the following:

/* =RDE
----------------------------------------------- */

And I’m right where I want to be with a few keystrokes. No more finding redundant instances of that string. The “=” flag doesn’t even need to be placed before the first word. On a current project, I have several sections whose label begins with “MISC:”. So I place the flag next to a more unique word in the label:

/* MISC: =Lists
----------------------------------------------- */

…which allows me to quickly zoom to that section for generic/default list styles by doing a FIND for “=list”.

Of course, this tip is only helpful if you’re diligent about keeping rules organized into discrete sections when working with large style sheets.

Next tip will center around how I choose to break out my sections, the order of those sections in the entire document, and how to decide which rules get placed in which sections when there’s more than one choice.