CSS Naming Convention for Classes and IDs?

Well, just re-reading some of the cur­rent book­marks in my bag. To note:

I am try­ing to clean up and make things more effi­cient here at work. One goal would be to have a base CSS that will serve as a start­ing point for our Pro­duc­ers and Fron­tend peeps. Another goal would prob­a­bly be a con­ven­tion on how to use it and/or cre­ate new classes and IDs.

One of the things that keeps com­ing up lately would be the nam­ing con­ven­tion of classes and IDs. I used to imple­ment this kind of for­mat “class_name”. Then, only to switch to “class-name” in early ’06. Fast-forward to a cou­ple of months into the year dur­ing a project, I came to find out that if you are refer­ring to either a class­name or an ID (i.e. getEle­ment­ById, or some­thing like that) that the value’s hyphen get stripped out. Can some­one con­firm this phe­nom­ena and/or myth? That is, for exam­ple, doing “id-name” would be imple­mented like so:

document.getElementById("idname")

With that how­ever, would it be more read­able using a camel­Cased name? Although against Tantek’s step #4 in terms of sav­ing the user(s) poten­tial headaches. But would there be prob­lems if there was a stan­dard within one’s orga­ni­za­tion? That is, classes and IDs writ­ten as a vari­able, i.e. some­thing­LikeThis; no hyphens and no underscore.

I look for­ward to hear­ing your end­less wis­dom on this sub­ject sirs and madams. Thanks in advance.

4 Comments

Comments Feed
  1. Anselm Bradford

    The O’Reilly book JavaScript & DHTML Cook­book indi­cates that the DOM strips out hyphens in CSS ID’s and replaces them with camel­Case, but this no longer appears to be the case. I am not able to repro­duce that effect any­way, but that book is from 2003 and this post is from 2006, so my guess is times (and tech­nol­ogy) have changed.

    • sherwin

      Thanks for the input Anselm. Like you said, time and tech have changed. Cur­rently, I use hyphens but I use this con­ven­tion when nam­ing IDs for my forms:

      #formName

      I recall run­ning into a prob­lem with DOM and forms ID-names specif­i­cally a while back. I HTH. Have a good one.

      • Anselm Bradford

        It’s an inter­est­ing legacy behav­ior though, and could explain where the hyphen­ated CSS selec­tors con­ven­tion came from (I might note that Adobe Flex still does this with CSS). I was doing some search­ing on a solid rea­son for using hyphens, but was not able to find any­thing con­clu­sive, which sur­prised me since it really does seem like the pre­dom­i­nant format.

        The only vague rea­son (aside from the past behav­ior of being stripped out by the DOM) I could find for hyphen­ation over other for­mats is that hyphen­ation fol­lows the for­mat of CSS attrib­utes (font-size, text-decoration, etc.).

        Oth­ers have said they use a under­score instead because “-” has another mean­ing in the script­ing world, that of the sub­trac­tion operator. 

        In a cer­tain respect camel­Case would actu­ally make the most sense, because it would make it con­sis­tent with other pro­gram­ming par­a­digms. The classes and ID’s on an HTML page could be thought of as object instances, which by con­ven­tion are writ­ten in camel­Case in other lan­guages. But this is stretch­ing CSS beyond what it actu­ally is. 

        The under­score and hyphen are more read­able, which is impor­tant, but an annoy­ance I find with them is that many text edi­tors see each part of a hyphen­ated word as a sep­a­rate part, so when you double-click on the name (say to copy and paste it else­where) the whole name does not get selected. This hap­pens more so with hyphens than with under­scores from my experience.

        And then I’ve also seen underscore_Separated_Camel_Case, yikes!

      • sherwin

        underscore_Separated_Camel_Case” haha–scary.

        Yah, I agree with you with regards to the use of camel­Cas­ing in devel­op­ment (back­end). Mean­while, inter­est­ing insight which makes sense with regards to the use of hyphens being tied to style rules. In regards to text edi­tors, thank God for Text­Mate and Notepad++ =)

Leave a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>