title: Why are dashes preferred for CSS selectors / HTML attributes?
body: <p>In the past I've always used underscores for defining <em>class</em> and <em>id</em> attributes in HTML. Over the last few years I changed over to dashes, mostly to align myself with the <a href="http://css-tricks.com/5016-new-poll-hyphens-or-dashes/" rel="noreferrer">trend in the community</a>, not necessarily because it made sense to me.</p>
  
  <p>I've always thought dashes have more drawbacks, and I don't see the benefits:</p>
  
  <h3>Code completion &amp; Editing</h3>
  
  <p>Most editors treat dashes as word separators, so I can't tab through to the symbol I want. Say the class is "<code>featured-product</code>", I have to auto-complete "<code>featured</code>", enter a hyphen, and complete "<code>product</code>".</p>
  
  <p>With underscores "<code>featured_product</code>" is treated as one word, so it can be filled in one step.</p>
  
  <p>The same applies to navigating through the document. Jumping by words or double-clicking on class names is broken by hyphens.</p>
  
  <p>(More generally, I think of classes and ids as <em>tokens</em>, so it doesn't make sense to me that a token should be so easily splittable on hyphens.)</p>
  
  <h3>Ambiguity with arithmetic operator</h3>
  
  <p>Using dashes breaks object-property <a href="https://stackoverflow.com/questions/2119629/javascript-and-css-using-dashes/2119668#2119668">access to form elements</a> in JavaScript. This is only possible with underscores:</p>
  
  <pre><code>form.first_name.value='Stormageddon';
  </code></pre>
  
  <p>(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.)</p>
  
  <p>Languages like <a href="http://sass-lang.com/" rel="noreferrer">Sass</a> (especially throughout the <a href="http://compass-style.org/" rel="noreferrer">Compass</a> 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:</p>
  
  <pre><code>$list-item-10
  $list-item - 10
  </code></pre>
  
  <h3>Inconsistency with variable naming across languages</h3>
  
  <p>Back in the day, I used to write <code>underscored_names</code> for variables in PHP, ruby, HTML/CSS, and JavaScript. This was convenient and consistent, but again in order to "fit in" I now use:</p>
  
  <ul>
  <li><code>dash-case</code> in HTML/CSS</li>
  <li><code>camelCase</code> in JavaScript</li>
  <li><code>underscore_case</code> in PHP and ruby</li>
  </ul>
  
  <p>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:</p>
  
  <pre><code>var featured_product = $('#featured_product'); // instead of
  var featuredProduct = $('#featured-product');
  </code></pre>
  
  <p>The differences create situations where we have to <a href="https://stackoverflow.com/questions/7286607/jquery-camel-case-mapping-from-data-attribute-names-to-data-keys">translate strings</a> unnecessarily, along with the potential for bugs.</p>
  
  <p>So I ask: Why did the community almost universally settle on dashes, and are there any reasons that outweigh underscores?</p>
  
  <p>There is a <a href="https://stackoverflow.com/questions/1686337/hyphens-or-underscores-in-css-and-html-identifiers">related question</a> from back around the time this started, but I'm of the opinion that it's not (or <em>shouldn't</em> 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.</p>