In the past I’ve always used underscores for defining class and id attributes in HTML. Over the last few years I changed over to dashes, mostly to align myself with the trend in the community, not necessarily because it made sense to me.
I’ve always thought dashes have more drawbacks, and I don’t see the benefits:
Code completion & Editing
Most editors treat dashes as word separators, so I can’t tab through to the symbol I want. Say the class is “featured-product“, I have to auto-complete “featured“, enter a hyphen, and complete “product“.
With underscores “featured_product” is treated as one word, so it can be filled in one step.
The same applies to navigating through the document. Jumping by words or double-clicking on class names is broken by hyphens.
(More generally, I think of classes and ids as tokens, so it doesn’t make sense to me that a token should be so easily splittable on hyphens.)
Ambiguity with arithmetic operator
Using dashes breaks object-property access to form elements in JavaScript. This is only possible with underscores:
form.first_name.value="Stormageddon";
(Admittedly I don’t access form elements this way myself, but when deciding on dashes vs underscores as a universal rule, consider that someone might.)
Languages like Sass (especially throughout the Compass framework) have settled on dashes as a standard, even for variable names. They originally used underscores in the beginning too. The fact that this is parsed differently strikes me as odd:
$list-item-10
$list-item - 10
Inconsistency with variable naming across languages
Back in the day, I used to write underscored_names for variables in PHP, ruby, HTML/CSS, and JavaScript. This was convenient and consistent, but again in order to “fit in” I now use:
dash-casein HTML/CSScamelCasein JavaScriptunderscore_casein PHP and ruby
This doesn’t really bother me too much, but I wonder why these became so misaligned, seemingly on purpose. At least with underscores it was possible to maintain consistency:
var featured_product = $('#featured_product'); // instead of
var featuredProduct = $('#featured-product');
The differences create situations where we have to translate strings unnecessarily, along with the potential for bugs.
So I ask: Why did the community almost universally settle on dashes, and are there any reasons that outweigh underscores?
There is a related question from back around the time this started, but I’m of the opinion that it’s not (or shouldn’t have been) just a matter of taste. I’d like to understand why we all settled on this convention if it really was just a matter of taste.
