StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWhy are dashes preferred for CSS selectors / HTML attributes?
primarykey
Id
7560813
data
AcceptedAnswerId
7561329
AnswerCount
6
ClosedDate
CommentCount
12
CommunityOwnedDate
CreationDate
2011-09-26T20:18:13.367
FavoriteCount
81
LastActivityDate
2017-03-22T09:39:25.713
LastEditDate
2017-05-23T12:02:58.590
LastEditorUserId
-1
OwnerUserId
61439
ParentId
0
PostTypeId
1
Score
189
ViewCount
55211
LastEditorDisplayName
text
Body
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 <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. I've always thought dashes have more drawbacks, and I don't see the benefits: <h3>Code completion & Editing</h3> 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>". With underscores "<code>featured_product</code>" 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.) <h3>Ambiguity with arithmetic operator</h3> 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: <pre><code>form.first_name.value='Stormageddon'; </code></pre> (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 <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: <pre><code>$list-item-10 $list-item - 10 </code></pre> <h3>Inconsistency with variable naming across languages</h3> 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: <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> 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: <pre><code>var featured_product = $('#featured_product'); // instead of var featuredProduct = $('#featured-product'); </code></pre> 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. So I ask: Why did the community almost universally settle on dashes, and are there any reasons that outweigh underscores? 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 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.
Tags
<html><css><coding-style><naming-conventions>
Title
Why are dashes preferred for CSS selectors / HTML attributes?
singulars
PostAcceptedAnswerId
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USCommunity
UserOwnerUserId
1. USAndrew Vit
plurals
PostLinksPostIdRelatedPostId
1. PL
 singulars
 LinkTypeLinkTypeId
 LTLinked
2. PL
 singulars
 LinkTypeLinkTypeId
 LTLinked
3. PL
 singulars
 LinkTypeLinkTypeId
 LTLinked
PostLinksRelatedPostIdPostId
1. PL
 singulars
 LinkTypeLinkTypeId
 LTLinked
2. PL
 singulars
 LinkTypeLinkTypeId
 LTDuplicate
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
2. PO
 singulars
 PostTypePostTypeId
 PTAnswer
3. PO
 singulars
 PostTypePostTypeId
 PTAnswer
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 POWhy are dashes preferred for CSS selectors / HTML attributes?
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 POWhy are dashes preferred for CSS selectors / HTML attributes?
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
3. VO
 singulars
 PostPostId
 POWhy are dashes preferred for CSS selectors / HTML attributes?
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.