[解決済み】CSSセレクタ/HTML属性でダッシュが好まれるのはなぜですか？

質問

これまで、私は常にアンダースコアを使って クラス と イド 属性があります。ここ数年、私はダッシュに変更しました。 コミュニティーのトレンド しかし、必ずしもそれが理にかなっているとは限りません。

ダッシュは欠点が多いと思っていて、利点がわからないんです。

コード補完＆編集

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

アンダースコア付き " featured_product "は1つの単語として扱われるため、1ステップで入力することができます。

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

(より一般的には、クラスとIDを トークン だから、ハイフンで簡単に分割できるようなトークンでは意味がない)

算術演算子の曖昧さ

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

form.first_name.value='Stormageddon';

(確かに私自身はこの方法でフォーム要素にアクセスすることはありませんが、普遍的なルールとしてダッシュとアンダースコアを決定する際には、誰かがそうするかもしれないと考えてください)。

のような言語 サス (特に コンパス のフレームワークでは、変数名であってもダッシュが標準となっています。当初はアンダースコアも使っていたそうです。これが違うように解釈されるのはおかしいと思うんです。

$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 で行うことのほとんどは CSS セレクタ を使うと、DOMから要素を取得することができるため、ドット記法はあまり意味がありません。あなたはどちらがお好みでしょうか？

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

私は、最初の2つのオプションがより好ましいと思います。 '#first-name' は、JavaScriptの変数に置き換えて動的に構築することができます。また、その方が目に楽しいと思います。

SassがCSSの拡張で演算を可能にしたことは、CSSそのものにはあまり当てはまらないのですが、SassがCSSの言語様式に従っていることは理解しています（受け入れています）。 $ 変数のプレフィクスは、当然ながら @ ). SassドキュメントをCSSドキュメントのように見せるには、ダッシュをデリミターとして使用するCSSと同じスタイルに従う必要があります。CSS3 では、算術演算は calc という関数がありますが、これはCSSそのものでは問題ないことを示しています。

言語間での変数名の不統一

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

一般に、異なる言語のすべてに自分のスタイルを押し込もうとするよりも、書いている言語にとって最もquot;native"と感じられるスタイルを採用する方がよいことがわかります。ネイティブのライブラリや言語構造を使うことは避けられないので、好むと好まざるとにかかわらず、自分のスタイルはネイティブのスタイルによって「汚染」されることになり、努力することはほとんど無駄です。

私のアドバイスは、言語間で好きなスタイルを見つけるのではなく、各言語の中で自分を落ち着かせ、その癖をすべて好きになることです。CSSの癖のひとつは、キーワードや識別子を小文字で書き、ハイフンで区切ることです。個人的には、これは視覚的にとても魅力的で、すべて小文字（ただしハイフンは使わない）で書くのが合っていると思います。 HTML .