How do the best CSS coders separate multi-term CSS selectors?
Recently, I’ve become interested in the separators used by developers in multi-term CSS selectors.
Amidst a bit of googling, a recent poll posted to CSS Tricks caught my eye. The poll asked which convention users preferred; using-hyphens, using_underscores, or the perhaps non-obvoius camelCase. The results seem inconsistent with the code I’ve seen in “the wild”; camel case came in well in front, with ~45% of the votes, while hyphens and underscores each garnered about 30%.
Many of the respondents noted the rationale behind their personal convention, and while I have doubts that everyone has a considered reason for their separator of choice (most, I submit, simply do what they’ve always done), the subject is certainly worthy of a closer look.
Hyphens
The most aesthetically compelling argument is that the specification itself uses hyphens in pseudo selectors such as first-child. Some also feel that terms separated by hyphens are more readable.
Camel Case
The leading argument for camel case is one of compatibility; every language can handle terms in camel case. And because camel case is a popular convention in many languages, the simple fact of muscle memory has to be considered. If a developer just thinks in camel case and types in camel case automatically, it may become a personal convention without ever being fully considered.
Underscores
Disclaimer: I prefer underscores, and may shamelessly promote them.
If underscore users have a trump card, it’s that of text selection. Most text editors consider a hyphen a word separator, which means that a double-click will select an entire underscore-separated selector, but only a single term of a selector separated by hyphens. While camel case has the same advantage, in my opinion the underscore combines the readability of hyphens and the selectability of camel case.
Us underscore folk do have to overcome the handicap of the fact that our preferred separator requires an additional keystroke. For Dvorak users such as myself, though, the reach to the hyphen/underscore key is shorter, and that may mitigate that drawback.
But what do the specialists use?
My supposition is that camel case enjoys such a lead because of the demographics of CSS Tricks. Specifically. my thought is that many visitors there are hired guns, who work on a broad range of platforms. Indeed, many of the comments on the poll bear out this idea, as languages from Java to C# are mentioned.
So, what do the specialists use? I created a list of ~25 top CSS slingers, based partially on Andy Clarke’s HTML naming conventions chart from 2004. I updated the list a bit, shamelessly tweaked it to my fancy, and then checked under the skirts of each designer’s site with the ol’ WebKit Inspector.
Among these experts, hyphens are the clear leader. Next most popular was none, which is to say that multiple term selectors were avoided or simply concatenated together (if none had been an option on the CSS Tricks poll, I wonder what share of the vote it might have received. ). Camel case and the underscore each came in at less than 10%.
Clearly, there is as difference in conventions between the poll respondents and my list of experts, and it makes me wonder why they’re using hyphens, and if it’s a considered position.