CSSセレクター/ HTML属性にダッシュが推奨されるのはなぜですか？

以前は、HTMLでクラスとIDの属性を定義するために常にアンダースコアを使用してきました。ここ数年、私はダッシュに切り替えました。ほとんどがコミュニティのトレンドに合わせるためでした。必ずしも自分にとって意味があるからではありませんでした。

ダッシュにはもっと欠点があるといつも思っていましたが、利点はわかりませんでした。

コード補完と編集

ほとんどのエディターはダッシュを単語の区切り文字として扱うため、必要な記号にタブで移動できません。クラスが「featured-product」であるとすると、「」をオートコンプリートしfeatured、ハイフンを入力して「product」を完成させる必要があります。

下線付きの " featured_product"は1つの単語として扱われるため、1つのステップで埋めることができます。

ドキュメント内を移動する場合も同様です。単語でジャンプしたり、クラス名をダブルクリックしたりすると、ハイフンで区切られます。

（より一般的には、クラスとIDをトークンと見なすため、トークンをハイフンで簡単に分割できるようにしても意味がありません。）

算術演算子のあいまいさ

ダッシュを使用すると、JavaScriptのフォーム要素へのオブジェクトプロパティアクセスが無効になります。これはアンダースコアでのみ可能です：

form.first_name.value='Stormageddon';

（確かに私はこの方法でフォーム要素にアクセスしませんが、ダッシュとアンダースコアを普遍的な規則として決定するときは、誰かがそうする可能性があることを考慮してください。）

Sass（特にCompassフレームワーク全体）のような言語は、変数名であっても、標準としてダッシュを使用しています。最初はアンダースコアも使用していました。これが別の方法で解析されるという事実は、奇妙な印象を受けます。

$list-item-10
$list-item - 10

言語間の変数の命名との不一致

昔underscored_namesは、PHP、Ruby、HTML / CSS、JavaScriptで変数を記述していたものです。これは便利で一貫性がありましたが、ここでも「適合する」ために次のように使用します。

• dash-case HTML / CSS
• camelCase JavaScriptで
• underscore_case PHPとRuby

これはあまり気になりませんが、なぜこれらが一見故意にずれてしまったのかと思います。少なくともアンダースコアを使用すると、一貫性を維持することができました。

var featured_product = $('#featured_product'); // instead of
var featuredProduct = $('#featured-product');

違いにより、文字列を不必要に翻訳しなければならない状況と、バグの可能性が生じます。

だから私は尋ねます：なぜコミュニティはほぼ普遍的にダッシュに落ち着きました、そしてアンダースコアを上回る理由がありますか？

これが始まった頃から関連する質問がありますが、私はそれが単なる趣味の問題ではない（またはそうであるべきではなかった）と考えています。それが本当に趣味の問題だったのなら、なぜ私たち全員がこの条約を決めたのかを理解したいと思います。

コード補完

ダッシュが句読点として解釈されるか、不透明な識別子として解釈されるかは、選択したエディターに依存すると思います。ただし、個人的な好みとして、CSSファイル内の各単語間をタブで移動できるようにしたいと考えています。アンダースコアで区切られていて、途中に停止文字がなければ、面倒です。

また、ハイフンを使用すると、テキストを含む任意の要素を選択する| =属性セレクターを利用できます。

span[class|="em"] { font-style: italic; }

これにより、次のHTML要素がイタリック体のフォントスタイルになります。

<span class="em">I'm italic</span>
<span class="em-strong">I'm italic too</span>

算術演算子のあいまいさ

JavaScriptのドット表記によるHTML要素へのアクセスは、機能というよりはバグだと思います。これは、初期のひどいJavaScript実装からのひどい構造であり、実際には素晴らしい習慣ではありません。最近JavaScriptで行うほとんどのことについては、とにかくDOMから要素をフェッチするためにCSSセレクターを使用する必要があるため、ドット表記全体がかなり役に立たなくなります。どちらを選びますか？

var firstName = $('#first-name');
var firstName = document.querySelector('#first-name');
var firstName = document.forms[0].first_name;

特に'#first-name'、JavaScript変数に置き換えて動的に構築できるため、最初の2つのオプションの方がはるかに望ましいと思います。また、目に優しいです。

SassがCSSの拡張機能で算術演算を可能にするという事実は、CSS自体には実際には適用されませんが、SassがCSSの言語スタイルに従うことを理解（および採用）します（$もちろん変数のプレフィックスを除き、されています@）。SassドキュメントがCSSドキュメントのように見える場合は、ダッシュを区切り文字として使用するCSSと同じスタイルに従う必要があります。CSS3では、算術はcalc関数に限定されています。これは、CSS自体ではこれが問題ではないことを示しています。

言語間の変数の命名との不一致

マークアップ言語、プログラミング言語、スタイリング言語、スクリプト言語など、すべての言語には独自のスタイルがあります。これは、XMLなどの言語グループのサブ言語内にあります。たとえば、XSLTはハイフン区切りの小文字を使用し、XMLスキーマはキャメルケースを使用します。

一般的に、自分が書いている言語に最も「ネイティブ」であるように感じて見えるスタイルを採用する方が、独自のスタイルをさまざまな言語に詰め込むよりも優れていることがわかります。ネイティブライブラリと言語構成を使用する必要があるので、スタイルは、ネイティブスタイルが好きかどうかに関係なく「汚染」されるので、試しても無駄です。

私のアドバイスは、言語間でお気に入りのスタイルを見つけるのではなく、各言語の中でくつろいで、その癖のすべてを愛することを学ぶことです。CSSの特徴の1つは、キーワードと識別子が小文字で記述され、ハイフンで区切られていることです。個人的には、これは視覚的に非常に魅力的であり、すべて小文字（ハイフンなし）のHTMLに適合すると思います。

おそらく、HTML / CSSコミュニティがアンダースコアではなくダッシュに揃えられた主な理由は、仕様とブラウザ実装の歴史的な欠陥によるものです。

2001年3月にhttps://developer.mozilla.org/en-US/docs/Underscores_in_class_and_ID_Namesで公開されたMozillaドキュメントから

1996年に最終形式で公開されたCSS1仕様では、「エスケープ」されない限り、クラス名とID名にアンダースコアを使用できませんでした。エスケープされたアンダースコアは次のようになります。

    p.urgent\_note {color: maroon;}

しかし、これは当時のブラウザでは十分にサポートされていなかったため、その慣例はまだ普及していません。また、1998年に発行されたCSS2は、クラス名およびID名でのアンダースコアの使用を禁止しています。ただし、2001年の初めに公開された仕様の正誤表によって、アンダースコアが初めて合法となった。残念ながら、これはすでに複雑な景観を複雑にしています。

私は一般的にアンダースコアが好きですが、バックスラッシュは当時のサポートが少なかったことは言うまでもなく、希望を超えて醜くなります。開発者がペストのようにそれを避けた理由を理解できます。もちろん、今はバックスラッシュは必要ありませんが、ダッシュエチケットはすでにしっかりと確立されています。

私は誰もがこれに断固として答えることはできないと思いますが、ここに私の教育を受けた推測があります：

1. アンダースコアはShiftキーを押す必要があるため、入力が難しくなります。

2. 公式のCSS仕様の一部であるCSSセレクターは、アンダースコアではなくダッシュ（：first-childやpseudo-elements：first-lineなどの疑似クラスなど）を使用します。プロパティについても同じです。たとえば、テキスト装飾、背景色などです。プログラマーは習慣の生き物です。正当な理由がない限り、標準のスタイルに従うことは理にかなっています。

3. これは棚の上にありますが...神話か事実かに関係なく、Googleはアンダースコアで区切られた単語を単一の単語として扱い、ダッシュで区切られた単語を別の単語として扱うという長年の考えがあります。（アンダースコアとダッシュのマットカッツ。）このため、ページURLを作成するための私の好みは、-words-with-dashesを使用することであり、少なくとも私にとっては、これは他のもののための命名規則に組み込まれています。 、CSSセレクターのように。

多くの理由がありますが、最も重要なことの1つは一貫性を維持することです。

この記事はそれを包括的に説明していると思います。

CSSはハイフンで区切られた構文です。これによって、私たちはのようなもの書く意味font-size、line-height、border-bottomなど

そう：

構文を混在させないでください。一貫性がありません。

近年、URLのハイフンで区切られた単語全体のセグメントに明らかな上昇がありました。これは、SEOのベストプラクティスによって推奨されます。Googleでは、「URLにアンダースコア（_）ではなくハイフン（-）を使用することをお勧めします」：http : //www.google.com/support/webmasters/bin/answer.py? answer =76329。

述べたように、さまざまな慣習がさまざまな状況でさまざまな時期に広まったが、それらは通常、プロトコルまたはフレームワークの正式な一部ではない。

私の仮説は、Googleの位置がこのパターンを1つの主要なコンテキスト（SEO）内に固定し、クラス、ID、および属性名でこのパターンを使用する傾向は、単に群れがこの一般的な方向にゆっくりと移動しているというものです。

プログラマ依存だと思います。ダッシュを使う人もいれば、アンダースコアを使う人もいます。
個人的にアンダースコア（_）を使用しているのは、他の場所でも使用しているためです。例：
-JavaScript変数（var my_name）;
-コントローラのアクション（public function view_detail）
アンダースコアを使用するもう1つの理由は、ほとんどのIDEではアンダースコアで区切られた2つの単語が1つの単語と見なされるためです。（double_clickで選択することもできます）。