web-dev-qa-db-ja.com

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

過去には、classおよびidを定義するために常にアンダースコアを使用していましたHTMLの属性。ここ数年、私はダッシュに切り替えました。ほとんどの場合、 コミュニティのトレンド に合わせるためです。必ずしも理にかなっているからではありません。

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

コード補完と編集

ほとんどのエディターはダッシュをWordの区切り記号として処理するため、必要な記号にタブで移動できません。クラスが「featured-product」だとすると、「featured」を自動補完し、ハイフンを入力して、「product」を補完する必要があります。

アンダースコアを使用すると、「featured_product」は1つのWordとして扱われるため、1ステップで入力できます。

同じことが、ドキュメント内をナビゲートする場合にも当てはまります。単語によるジャンプまたはクラス名のダブルクリックは、ハイフンによって分割されます。

（より一般的には、クラスとIDをtokensと考えているため、トークンがハイフンで簡単に分割可能であることは意味がありません）

算術演算子とのあいまいさ

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

form.first_name.value='Stormageddon';

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

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

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

言語間での変数の命名との矛盾

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

  • dash-case HTML/CSSで
  • camelCase JavaScriptで
  • PHPおよびRubyのunderscore_case

これは実際にはあまり気にしませんが、どうしてこれらが一見意図的に不整合になったのでしょうか。少なくともアンダースコアを使用すると、一貫性を維持できました。

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

違いは、バグの可能性とともに、不必要に strings を必要とする状況を作り出します。

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

関連する質問 はこれが始まった頃からありますが、私はそうではないという意見です（またはすべきではないされている）好みの問題。それが本当に趣味だけの問題であるのなら、なぜ私たち全員がこの慣習に決着したのかを理解したいと思います。

htmlcsscoding-stylenaming-conventions
205
Andrew Vit

コード補完

ダッシュが句読点として解釈されるか、不透明な識別子として解釈されるかは、選択するエディターに依存します。ただし、個人的な好みとして、CSSファイル内の各Wordをタブで移動できることを好み、アンダースコアで区切られていてストップがない場合は迷惑になるでしょう。

また、ハイフンを使用すると、 =属性セレクター を利用できます。これは、テキストを含む任意の要素を選択し、オプションでダッシュが続きます。

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 Selectors を使用します。これにより、ドット表記全体がかなり役に立たなくなります。どっちがいい？

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 に収まると思います。

127
Asbjørn Ulsberg

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

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

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

    p.urgent\_note {color: maroon;}

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

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

64
user193130

私は誰もこれに決定的に答えることができるとは思わないが、ここに私の経験に基づいた推測がある：

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

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

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

39
Mason G. Zhwiti

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

前述のように、さまざまな慣習がさまざまな状況でさまざまな時点で普及していますが、通常はプロトコルやフレームワークの正式な部分ではありません。

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

12
Faust

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

this の記事で包括的に説明されていると思います。

CSSは、ハイフンで区切られた構文です。つまり、font-size、line-height、border-bottomなどのように記述します。

そう：

構文を混在させないでください：矛盾しています。

9
simhumileco

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

4
Ali Farhoudi