CSS Style Naming Strategies
Jun 5th, 07 | 2 remarksOne of the most important aspects of programming in any language is giving your variables, arrays, etc., meaningful names. The same is true for CSS. Only you can determine what’s meaningful to you, but one tactic is to choose names for your divs and classes that can withstand any number of redesigns.
For example, aside from using names such as #header, #sidebar or #footer to set up the basic framework of your design, try to avoid names like #left_column, #subfooter, or something vague like #secondary_right. The reason is because information appearing in those sections now, may not later.
Instead, select names which are relevant to the content they’re being assigned to, like #main_nav, #copyright, or #rss_info. This way, no matter where you decide to put, say, your navigation (whether it’s in the header or a sidebar), you only have to worry about modifying the actual styles in the CSS, and not the names in the markup. Of course you may still have to shuffle your HTML around some in a redesign, but for the sake of brevity we’re just talking style names.
Granted, this concept may not always be feasible, but the more you can minimize names which are given according to placement within the design rather than content relevancy, the better. If you’re one who likes to redesign/refresh often (like me), then employing a naming strategy which makes sense to you can save you a lot of dev/testing time in the future.
I use #sidebar1, #sidebar2 instead of leftsidebar and rightsidebar. I usually try to name it by describing what the div is instead of generic names, sidebars are exceptional to this rule.
Jun 5, 07 | 2:50 pmI agree sidebars fall into an exception. I mean, they’re sidebars! Hard to get creative in naming them. :) One nice thing about using your suggestion is they could be moved around without renaming, as in 2 left sidebars, or one on each side, etc. I’ll admit though, I quickly forget which is which when I use numbers in my IDs so I usually avoid that naming convention.
Jun 5, 07 | 3:32 pm