web-dev-qa-db-ja.com

html / css IDおよびクラスの標準の命名規則は何ですか？

使用しているプラ​​ットフォームに依存しますか、またはほとんどの開発者が提案/従う共通の規則がありますか？

いくつかのオプションがあります：

  1. id="someIdentifier"'-javascriptコードとかなり一貫性があります。
  2. id="some-identifier"-html5のような属性やhtmlのその他のものに似ています。
  3. id="some_identifier"-Rubyコードとかなり整合性があり、Javascript内の有効な識別子です

上記の＃1と＃3は、Javascriptでうまく動作するため、最も理にかなっていると考えていました。

これに対する正しい答えはありますか？

htmlcssnaming-conventionsstandards
203
egervari

ありません。

ハイフンがテキストエディター（Gedit）の構文の強調表示を台無しにするため、常にアンダースコアを使用していますが、それは個人的な好みです。

私はあちこちでこれらの規則がすべて使用されているのを見てきました。あなたが最高だと思うものを使用してください-あなたのために最も読みやすい/最も簡単に見えるものだけでなく、それを頻繁に使用するので最も簡単に入力します。たとえば、キーボードの下側にアンダースコアキーがある場合（ほとんどありませんが、完全に可能です）、ハイフンに固執します。自分に最適なものを選んでください。さらに、これら3つの規則はすべて簡単に読むことができます。チームで作業している場合は、チームが指定した規則（ある場合）を守ることを忘れないでください。

2012を更新

時間の経過とともにプログラム方法を変更しました。今では、ハイフンの代わりにキャメルケース（thisIsASelector）を使用しています。後者はかなりいです。 you好きなものを使用してください。

2013を更新

私は毎年物事を混乱させたいようです... Sublime Textに切り替えてBootstrapをしばらく使用した後、私はダッシュに戻りました。今では、un_der_scoresやcamelCaseよりもずっときれいに見えます。 私の元のポイントはまだあります：そこにはありません標準ではありません。

2015年に更新

ここでの慣例に関する興味深いコーナーケースは Rust です。私はこの言語が本当に好きですが、コンパイラはunderscore_case以外のものを使用して何かを定義すると警告を表示します。警告をオフにすることもできますが、興味深いことに、コンパイラはデフォルトで規則を強く提案しています。大規模なプロジェクトでは、コードがすっきりするのは悪いことではないと思います。

2016年に更新（- yo それを求められた）

今後のプロジェクトに BEM 標準を採用しました。クラス名は非常に冗長になりますが、クラスとそれらに付随するCSSに優れた構造と再利用性を与えると思います。私はBEMが実際には標準だと思います（したがって、noはおそらくyesになります）が、プロジェクトで使用するかどうかはあなた次第です。最も重要なこと：あなたが選んだものと一致していること。

205
Bojangles

Googleによるcss＆htmlスタイルガイドがあります。常にハイフンを使用することをお勧めします： https://google.github.io/styleguide/htmlcssguide.html#ID_and_Class_Name_Delimiters .

37
azurkin

ハイフン（-）ではなくアンダースコアを使用することをお勧めします。

<form name="myForm">
  <input name="myInput" id="my-Id" value="myValue"/>
</form>

<script>
  var x = document.myForm.my-Id.value;
  alert(x);
</script>

そのようにして簡単にidで値にアクセスできます。ただし、ハイフンを使用すると、構文エラーが発生します。

これは古いサンプルですが、jqueryがなくても機能します-:)

@jean_ralphioのおかげで、回避する方法があります

var x = document.myForm['my-Id'].value;

ダッシュスタイルはGoogleコードスタイルになりますが、私はそれがあまり好きではありません。 idにはTitleCaseを、クラスにはcamelCaseを使用します。

26
Weijing Jay Lin

HTMLおよびCSSの命名規則については合意がありません。しかし、オブジェクトの設計を中心に命名法を構築できます。より具体的には、私が所有権と関係と呼ぶもの。

所有権

オブジェクトを説明するキーワードは、ハイフンで区切ることができます。

車の新しい右折

オブジェクトを説明するキーワードは、オブジェクト、オブジェクト記述子、アクション、アクション記述子の4つのカテゴリに分類することもできます（左から右に並べる必要があります）。

車-名詞、およびオブジェクト
new-形容詞、およびオブジェクトをより詳細に説明するオブジェクト記述子
turned-動詞、およびオブジェクトに属するアクション
right-形容詞、およびアクションをより詳細に説明するアクション記述子

注：動詞（アクション）は過去形（ターンド、ディッド、ランなど）である必要があります。

関係

オブジェクトは、親や子のような関係を持つこともできます。 ActionおよびAction-Descriptorは親オブジェクトに属し、子オブジェクトには属しません。オブジェクト間の関係には、アンダースコアを使用できます。

車の新しい右折ホイール左折左

  • car-new-right-right（所有権の規則に従います）
  • ホイール左折左（所有権ルールに従います）
  • car-new-turned-right_wheel-left-turned-left（関係ルールに従います）

最終ノート：

  • CSSは大文字と小文字を区別しないため、すべての名前を小文字（または大文字）で記述する方が適切です。キャメルケースやパスカルケースは、あいまいな名前につながる可能性があるため、避けてください。
  • クラスを使用するタイミングとIDを使用するタイミングを把握します。 Webページで一度だけ使用されるIDだけではありません。ほとんどの場合、IDではなくクラスを使用する必要があります。 （ボタン、フォーム、パネルなど）のようなWebコンポーネントは常にクラスを使用する必要があります。 Idは名前の競合を簡単に引き起こす可能性があるため、マークアップの名前空間に控えめに使用する必要があります。上記の所有権と関係の概念は、クラスとIDの両方の命名に適用され、命名の競合を回避するのに役立ちます。
  • CSS命名規則が気に入らない場合は、構造命名規則、プレゼンテーション命名規則、セマンティック命名規則、BEM命名規則、OCSS命名規則など、他にもいくつかあります。
10
tfmontague

考慮すべきもう1つの代替標準：

<div id="id_name" class="class-name"></div>

そしてあなたのスクリプトで：

var variableName = $("#id_name .class-name");

これは、変数、ID、およびクラスにそれぞれcamelCase、under_score、およびhyphen-ationを使用するだけです。この標準については、いくつかの異なるWebサイトで読みました。 css/jqueryセレクターでは少し冗長ですが、冗長性によりエラーをキャッチしやすくなります。例：CSSファイルに.unknown_nameまたは#unknownNameが表示されている場合、実際に何を参照しているかを把握する必要があることがわかります。

9
RoboticRenaissance

多くの人がCSS idとクラス名でハイフンを好むもう1つの理由は機能性です。

次のようなキーボードショートカットを使用する option + left/right （または ctrl+left/right Windowsで）Wordごとにコードをトラバースするには、各ダッシュでカーソルを停止し、キーボードショートカットを使用してIDまたはクラス名を正確にトラバースできます。アンダースコアとキャメルケースは検出されず、カーソルはまるで1つのWordであるかのようにそれらの上をドリフトします。

4
Kyle Vassella

私は最近、XMLの学習を始めました。アンダースコアバージョンは、XML関連（DOM、XSDなど）のすべてをJava、JavaScript（キャメルケース）などのプログラミング言語から分離するのに役立ちます。そして、プログラミング言語で許可されている識別子を使用するほうが見栄えが良いことに同意します。

編集：無関係かもしれませんが、ここに、IDの命名時に従うXML要素の命名規則と推奨事項へのリンクがあります（「XML命名規則」および「最良の命名規則」セクション）。

http://www.w3schools.com/xml/xml_elements.asp

1
mkdrive2

プラットフォームに依存していると思います。 .Net MVCで開発する場合、クラス名にはbootstrapスタイルの小文字とハイフンを使用しますが、IDにはPascalCaseを使用します。

この理由は、私のビューが厳密に型指定されたビューモデルに支えられているからです。 C＃モデルのプロパティはパスカルの場合です。 MVCでモデルをバインドするために、モデルにバインドするHTML要素の名前は、Pascalのケースであるビューモデルプロパティと一致していることは理にかなっています。簡単にするために、私のIDは、名前付き入力グループの各要素に一意のIDを必要とするラジオボタンとチェックボックスを除き、要素名と同じ命名規則を使用しています。

0
Louise Eggleton