Semantic naming of elements: is it always possible?

[vanishdesign]

Is it always possible to come up with meaningful names for your divs?

Sometimes I will end up using IDs like "column" just because I can't come up with a name that really reflects the content within. I'm not even sure if "column" is so bad.

This is when I'm styling elements inside the main content area on a big site. Naming elements in page layout is still pretty simple.

Am I being too picky?

[RyanReese]

It's not always possible but I try to choose names relavant to the data/things inside of it. Aka ADS or something like that...it's possible for the most part you jjust have to be imaginative.

[kaloua3]

I think Ryan is right. The main thing is to avoid getting any "presentation" in the names. The best way is just to name them after their content. But in any case, no one is going to shoot you over this.

[vanishdesign]

Well in this case I've got two divs, and their purpose is to split some content into two columns. Maybe it's the old way of thinking that's getting me down.

I feel odd having two divs with the same class that's specific to the information. Right now I'm arranging a list of cities, and if I called the divs .cities, it wouldn't make sense if I would use them to the same effect on a list of states, or streets, or what have you.

I could make the rule declaration: .cities, .states, .streets{}, but it seems a waste, and possibly an equally-sized obstacle to a future designer.

[RyanReese]

I'd do something like this. Instead of .leftcolumn I'd do

content_description_left
then _right

You can use longer names if you need ya know

[kaloua3]

How far do we need to go to avoid "left" and "right", which seem like presentation issues to me? After all, the CSS is where these elements are positioned, and that can be changed in a heartbeat. Again, the semantic nazis are not going to get us on this.

[RyanReese]

Well it may help you remember which column is which if you look at your CSS file and forget the HTML structure

.content_description
.other_description

Hard to tell which is left/right even if you look at the CSS (unless AP'ing) because lets say for example you see a visual difference in one of those columns, it takes more work to look at each style and figure out if that is the cause because you don't know which one you are effecting. I put some presentation names like that just for rememberance later on. I don't see a big issue with that.

.red{color:red;}

I have a problem with THAT because that goes above and beyond what I'm doing.

[kaloua3]

I agree. Actually, I find it VERY helpful to name the main parts "header," "footer," "nav-bar," and "content," with "sidebar-right" and "sidebar-left" (or "column-") for that very reason. In the end, it is how usable it is for me (later) and anyone looking at the code that is important, like adding lots of comments.

[logic_earth]

What helps me in coming up with a structure and naming scheme is to keep the HTML and CSS separated in my mind. I setup all my HTML documents without CSS in mind. How it displays in the browser is irrelevant to the structure of the page.

[felgall]

You can always just number the columns or sidebars. While the numbers do imply (perhaps incorrectly ) some sort of order between them it is still better than using left and right where you may have reversed them.

[cooper.semantics]

Come up with a reusable naming convention throughout your site:

article, section, section-entries, section-features, description, summary, photo, etc.....

Then trigger off of the parenting wrapper, e.g.

<div id="home">..</div> etc...

#home .article {}

Again, be ready for any complications that are thrown at you...

I do something quite different when it comes to reusable markup:

<div class="article-obj">...</div>

I add -obj....

What happens is if you have 10 different articles you want to reuse.. -obj-10 -Sillyness....

But usually this never seems to be the case