Naming CSS Classes and IDs

I've been more than a little missing in action here lately, as the last few months have been particularly work-intensive, but I wanted to share a tip on naming CSS classes and IDs. My point here has to do with thinking ahead.

Thing is, when you start with CSS, future organizational issues may not be grasped. As an example, in the old days when one was learning word processing, instructions often said to name a letter something like "letter.doc"; well, that's fine, until you're up to letter29.doc and a scan of your file names doesn't lend a clue as to whom they're written to.

Similarly, most CSS tutorials keep classes and ID names simple and obvious. For example, the class or ID for a menu bar may simply be called "menu" (that is, .menu or #menu). Very logical; that tells you what it is. But what happens when you have a horizontal menu and decide you now also need a vertical side-bar menu?

Further, once you've moved beyond the beginner stages, you may find that "highlightbox" may tell you more than "red" (and will be much more helpful if/when the day comes when your highlight color is no longer red). That may be the day when you start renaming classes and IDs via the search/replace route.

Then again, you or your client may decide to add other applications to a website, such as a blog or shopping cart. Assuming it uses CSS, you may find that they've used the same words to name classes and IDs, because blogs and shopping carts *also* have menus that are needed in addition to your usual site-wide menu, and so you have delivered into your very own hands the "fun" and time-consuming job of renaming CSS classes and IDs so that they don't conflict with what you're already using. But, since plowing through an application that *may* have some of the CSS buried in the guts of the program is no fun at all, my guess is that you may choose to ::cough:: rename your own CSS classes and IDs instead. Search/replace is do-able, but no fun.

My tip? Think ahead.

Have your say ...

First-time comments will be held for moderation (but comments are appreciated). Otherwise, just be courteous. If your name is a bunch of keywords, your comment will be deleted. Don't post links unless highly pertinent. Posters must be 16 or older.

Manage your subscriptions

© 2004-2019 DianeV Web Design Studio. All Rights Reserved.
27 queries. 0.221 seconds.