SixThings has a post about CSS visual grouping
techniques. To some, this is something that might not seem very important, since it doesn't affect the user or how
the styles are rendered by the browser. However, these under-the-hood details are important, as you well know
if you've ever had to work on code that's been touched by other developers.I utilize many of the techniques mentioned in the article, but there are some that I've personally found to be more confusing than helpful. For example, in my experience, the "simple indentations" method reduces readability.
I would add the following techniques to the SixThings list:
- List properties alphabetically. I used to group them according to their function or type, as described in the article (e.g., height and width together), but found the alphabetical approach to be what works best for me. This way, I can eyeball any selector and see what's there without overlooking anything, because I know what order to expect.
- Put lots of whitespace between
sections. Okay, obviously "lots" is relative; you don't want to put 10 blank lines between your
header styles and your content styles. I usually put 2 lines between sections, and visually demarcate them further with
the following type of notation:
/* =HEADER
------------------------------------------------------- */
1. I tend to group properties by their function and in order of importance to me. For example -- div#some_section { z-index: 0; color: black; background-color: white; margin: 2ex; padding: 0px; border: 4px solid black; font-style: italic; font-family: serif; }
I then like to keep styled, unnamed (unclassed and unided), elements at the top followed by classes and then ids. I further order the elements by groups (i.e. styles for a menu grouped separately from styles for content), content groups first, and then alphabetically. I also keep groups sectioned in the same stylesheet by starting and ending comments like /** Begin content **/ ... /** End content **/ on new lines; separating sections by empty lines. Lately I have been breaking my stylesheets up though. I find that to be a lot easier to work with.
This is what I have come up with on my own without any instruction to do so. It may sound complicated, but it works for me. Of course, the inheritance has to be taken into account; so they are more guildlines than rules. If my explanation is horrible, just browse the styles on my site. They should clear it up.
Posted at 4:57PM on Apr 11th 2006 by James Sumners