CSS Naming Convention for Classes and IDs?

· 4 Comments

Well, just re-read­ing 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. Anoth­er goal would prob­a­bly be a con­ven­tion on how to use it and/or cre­ate new class­es and IDs.

One of the things that keeps com­ing up late­ly would be the nam­ing con­ven­tion of class­es and IDs. I used to imple­ment this kind of for­mat “class_name”. Then, only to switch to “class-name” in ear­ly ’06. Fast-for­ward 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 val­ue’s hyphen get stripped out. Can some­one con­firm this phe­nom­e­na and/or myth? That is, for exam­ple, doing “id-name” would be imple­ment­ed like so:

document.getElementById("idname")

With that how­ev­er, would it be more read­able using a camel­Cased name? Although against Tan­tek’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 with­in one’s orga­ni­za­tion? That is, class­es and IDs writ­ten as a vari­able, i.e. some­thing­LikeThis; no hyphens and no under­score.

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’Reil­ly 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­o­gy) have changed.

    • sherwin

      Thanks for the input Anselm. Like you said, time and tech have changed. Cur­rent­ly, 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­cal­ly a while back. I HTH. Have a good one.

      • Anselm Bradford

        It’s an inter­est­ing lega­cy behav­ior though, and could explain where the hyphen­at­ed 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 sol­id rea­son for using hyphens, but was not able to find any­thing con­clu­sive, which sur­prised me since it real­ly does seem like the pre­dom­i­nant for­mat.

        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 oth­er for­mats is that hyphen­ation fol­lows the for­mat of CSS attrib­ut­es (font-size, text-dec­o­ra­tion, etc.).

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

        In a cer­tain respect camel­Case would actu­al­ly make the most sense, because it would make it con­sis­tent with oth­er pro­gram­ming par­a­digms. The class­es 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 oth­er lan­guages. But this is stretch­ing CSS beyond what it actu­al­ly 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­at­ed word as a sep­a­rate part, so when you dou­ble-click on the name (say to copy and paste it else­where) the whole name does not get select­ed. This hap­pens more so with hyphens than with under­scores from my expe­ri­ence.

        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++ =)