Comments on: CSS Naming Convention for Classes and IDs? http://justamemo.com/2006/08/18/css-naming-convention-for-classes-and-ids/ Refreshed and starting clean, but lots to organize and streamline. Thu, 25 Feb 2010 19:07:15 -0800 http://wordpress.org/?v=2.9.2 hourly 1 By: sherwin http://justamemo.com/2006/08/18/css-naming-convention-for-classes-and-ids/comment-page-1/#comment-941 sherwin Thu, 05 Feb 2009 23:24:48 +0000 http://beta.thinkpile.com/justamemo.com/2006/08/18/css-naming-convention-for-classes-and-ids/#comment-941 "underscore_Separated_Camel_Case" haha--scary. Yah, I agree with you with regards to the use of camelCasing in development (backend). Meanwhile, interesting insight which makes sense with regards to the use of hyphens being tied to style rules. In regards to text editors, thank God for TextMate and Notepad++ =) “underscore_Separated_Camel_Case” haha–scary.

Yah, I agree with you with regards to the use of camelCasing in development (backend). Meanwhile, interesting insight which makes sense with regards to the use of hyphens being tied to style rules. In regards to text editors, thank God for TextMate and Notepad++ =)

]]> By: Anselm Bradford http://justamemo.com/2006/08/18/css-naming-convention-for-classes-and-ids/comment-page-1/#comment-940 Anselm Bradford Thu, 05 Feb 2009 23:08:24 +0000 http://beta.thinkpile.com/justamemo.com/2006/08/18/css-naming-convention-for-classes-and-ids/#comment-940 It's an interesting legacy behavior though, and could explain where the hyphenated CSS selectors convention came from (<a href="http://marxsoftware.blogspot.com/2008/11/cascading-style-sheets-flex-3-style.html" rel="nofollow">I might note that Adobe Flex still does this with CSS</a>). I was doing some searching on a solid reason for using hyphens, but was not able to find anything conclusive, which surprised me since it really does seem like the predominant format. The only vague reason (aside from the past behavior of being stripped out by the DOM) I could find for hyphenation over other formats is that hyphenation follows the format of CSS attributes (font-size, text-decoration, etc.). Others have said they use a underscore instead because "-" has another meaning in the scripting world, that of the subtraction operator. In a certain respect camelCase would actually make the most sense, because it would make it consistent with other programming paradigms. The classes and ID's on an HTML page could be thought of as object instances, which by convention are written in camelCase in other languages. But this is stretching CSS beyond what it actually is. The underscore and hyphen are more readable, which is important, but an annoyance I find with them is that many text editors see each part of a hyphenated word as a separate part, so when you double-click on the name (say to copy and paste it elsewhere) the whole name does not get selected. This happens more so with hyphens than with underscores from my experience. And then I've also seen underscore_Separated_Camel_Case, yikes! It’s an interesting legacy behavior though, and could explain where the hyphenated CSS selectors convention came from (I might note that Adobe Flex still does this with CSS). I was doing some searching on a solid reason for using hyphens, but was not able to find anything conclusive, which surprised me since it really does seem like the predominant format.

The only vague reason (aside from the past behavior of being stripped out by the DOM) I could find for hyphenation over other formats is that hyphenation follows the format of CSS attributes (font-size, text-decoration, etc.).

Others have said they use a underscore instead because “-” has another meaning in the scripting world, that of the subtraction operator.

In a certain respect camelCase would actually make the most sense, because it would make it consistent with other programming paradigms. The classes and ID’s on an HTML page could be thought of as object instances, which by convention are written in camelCase in other languages. But this is stretching CSS beyond what it actually is.

The underscore and hyphen are more readable, which is important, but an annoyance I find with them is that many text editors see each part of a hyphenated word as a separate part, so when you double-click on the name (say to copy and paste it elsewhere) the whole name does not get selected. This happens more so with hyphens than with underscores from my experience.

And then I’ve also seen underscore_Separated_Camel_Case, yikes!

]]> By: sherwin http://justamemo.com/2006/08/18/css-naming-convention-for-classes-and-ids/comment-page-1/#comment-939 sherwin Thu, 05 Feb 2009 22:14:22 +0000 http://beta.thinkpile.com/justamemo.com/2006/08/18/css-naming-convention-for-classes-and-ids/#comment-939 Thanks for the input Anselm. Like you said, time and tech have changed. Currently, I use hyphens but I use this convention when naming IDs for my forms: #formName I recall running into a problem with DOM and forms ID-names specifically a while back. I HTH. Have a good one. Thanks for the input Anselm. Like you said, time and tech have changed. Currently, I use hyphens but I use this convention when naming IDs for my forms:

#formName

I recall running into a problem with DOM and forms ID-names specifically a while back. I HTH. Have a good one.

]]> By: Anselm Bradford http://justamemo.com/2006/08/18/css-naming-convention-for-classes-and-ids/comment-page-1/#comment-937 Anselm Bradford Thu, 05 Feb 2009 21:54:33 +0000 http://beta.thinkpile.com/justamemo.com/2006/08/18/css-naming-convention-for-classes-and-ids/#comment-937 The O'Reilly book <a href="http://books.google.com/books?id=sYoAt65E1VoC&pg=PA340&lpg=PA340&dq=strips+hyphen+css&source=web&ots=aQ7mJQQYit&sig=nuYyqjvrpCQIxAWhZOc9gD3cZas&hl=en&ei=wF2LSYP0JISENYHIwdMH&sa=X&oi=book_result&resnum=5&ct=result" rel="nofollow">JavaScript & DHTML Cookbook</a> indicates that the DOM strips out hyphens in CSS ID's and replaces them with camelCase, but this no longer appears to be the case. I am not able to reproduce that effect anyway, but that book is from 2003 and this post is from 2006, so my guess is times (and technology) have changed. The O’Reilly book JavaScript & DHTML Cookbook indicates that the DOM strips out hyphens in CSS ID’s and replaces them with camelCase, but this no longer appears to be the case. I am not able to reproduce that effect anyway, but that book is from 2003 and this post is from 2006, so my guess is times (and technology) have changed.

]]>