CSS Nomenclature Question

Naming CSS Id's and Classes

[madcat]

I have the need to give two different elements the same name, do you see any downsides to me naming my elements as follows?

#left-side
.left-side

Thanks-

[DrDoc]

Technically, no... But, if you for a moment ignore the fact that one is an ID and that the other is a class name. ID's have to be unique, right? Well, then the ID is no longer unique, since the exact same name is used somewhere else. I don't know of any browsers that this would cause any issues in... yet. But, it's better to do it right, so avoid using the same name for both a class and an ID.

[drbrain]

The other difference between an id and a class is the specificity. Using an id is more specific that using a class, so if you have:

<div class="foo" id="foo">bar</div>

#foo { color: red; }
.foo { color: blue; }

'bar' will show up in red, not blue, useful if you need to override other styles within a particular section of your layout.

[papabaer]

CSS is case sensitive,

.left-side
.Left-side
.left-Side
.leFt-side

are all individual, valid (if somewhat confusing!) class names.

Reserve id's for "unique-to-the-page" elements, or where targeting may be required.

Use classes where repeated application is likely.

[SethCall]

I usually never disagree with DrDoc, (in fact, I learn alot from him) but this is a small issue after all.

Here Goes:

XML-defined stuff

ID's are defined in the XML specification as unique. We all know that here...

But, id's also fall underneath a certain category of attribute, known as a "TokenizedType" (or the ID attribute), which requires, among other things, that each be unique, and that there be no more than one ID per element.

Read these 2 sections for the full-blown description: the XML spec should be read first:

XML spec:
[w3.org...]
XHTML spec:
[w3.org...]

On to the class issue:

XHTML + CSS

The "class" attribute, though, according to the XHTML + CSS spec, is merely a StringType. (it never says this, but I do believe that since it omits saying that it is a "ID"-type attribute, then you can rest assure its a StringType, by default. It's also definatly not an EnumeratedType.) There is nothing that says a StringType can not be the same as the ID, or as another StringType: hence, multiple elements can have the same class, and classes can be the same as an id.

And yes, I am a dork. But I must say its totally ok to have id's and classes with the same name, even with case-sensitive standards.

(after the # and ., of course)

[DrDoc]

Thanks for bringing that up, SethCall. And, I have to say that it makes sense. The key is, like you mentioned (just want to emphasize it), that ID names and class names are different types. So, it should be ok to use the same name. At least until W3C comes and says that we can't ;)

[SethCall]

heh... I dont' think they would do that.

Cuz.. lets see...cuz welll lets just say Ill post later ;)

[mipapage]

Fwiw,

The two free downloadable chapters available from Zeldman's new book outline some interesting usage of ID's where at least I wouldn't have thought to use them before.

Check'em out thru:
www.newriders.com/
How's that for a clean link?

[edited by: Nick_W at 6:36 am (utc) on May 17, 2003]
[edit reason] Perfect! [/edit]

[madcat]

When is that bloody book going to be here already! They haven't even touched ALA for months.