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

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

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

1. id="someIdentifier"' -JavaScriptコードとかなり一致しているように見えます。
2. id="some-identifier" -html5のような属性やその他のhtmlに似ています。
3. id="some_identifier" -ルビコードとかなり一致しているように見え、依然としてJavaScript内で有効な識別子です

上記の＃1と＃3は、Javascriptとの相性が良いため、最も意味があると考えていました。

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

ありません。

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

私はこれらの慣習が至る所で使われているのを見てきました。自分が最も使いやすいと思うものを使用します。読みやすく、見やすく、使いやすいので入力も簡単です。たとえば、キーボードの下側にアンダースコアキーがある場合（可能性は低いですが、完全に可能です）、ハイフンを使用します。自分に最適なものを選びましょう。さらに、これらの3つの規則はすべて簡単に読み取ることができます。チームで作業している場合は、チームが指定した規則（存在する場合）を守るようにしてください。

2012年の更新

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

2013年更新

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

2015年の更新

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

更新2016（あなたがそれを求め）

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

更新2019（あなたがそれを求め）

しばらくCSSを書かなかった後、私は彼らの製品の1つでOOCSSを使用する場所で働き始めました。私は個人的に、クラスをどこにでも散らかすのはかなり不愉快だと思っていますが、HTMLとCSSの間を常に移動する必要がないので、非常に生産的に感じられます。

しかし、私はまだBEMに落ち着いています。冗長ですが、名前空間により、Reactコンポーネントでの操作が非常に自然になります。また、ブラウザのテスト時に特定の要素を選択するのにも最適です。

OOCSSとBEMは、世の中にあるCSS標準のほんの一部です。CSS はそれほど良くないので、あなたに合ったものを1つ選んでください-それらはすべて妥協に満ちています。

アップデート2020

今年は退屈なアップデートです。まだBEMを使用しています。上記の理由により、私の立場は2019年のアップデートから実際には変更されていません。チームのサイズに合わせて調整し、CSSの貧弱な機能セットを好きなだけ非表示にする機能を使用してください。

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

...なので、ハイフン（-）の代わりにアンダースコアを使用することをお勧めします。

<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;

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

tl; dr;

正解は1つではありません。作業している人に応じて、多数ある中から1つを選択するか、意味のあるものに基づいて独自の標準を作成できます。そしてそれは100％プラットフォームに依存しています。

元の投稿

考慮すべきもう1つの代替規格：

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

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

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

これは、変数、ID、クラスに対して、それぞれキャメルケース、アンダースコア、ハイフネーションを使用するだけです。いくつかの異なるWebサイトでこの標準について読んだことがあります。css / jqueryセレクターでは少し冗長ですが、冗長性によりエラーを簡単にキャッチできます。例えば：あなたが表示された場合.unknown_nameや#unknownName、あなたのCSSファイルで、あなたが実際に言及だとかを把握する必要があります知っています。

アップデート2019

（ハイフンは「kebab-case」と呼ばれ、アンダースコアは「snake_case」と呼ばれ、「TitleCase」、「pascalCase」になります）

私は個人的にハイフンが嫌いです。私は最初にこれを1つの代替案として投稿しました（ルールが単純なため）。ただし、ハイフンは選択のショートカットを非常に難しくします（vsCodeのダブルクリック、ctrl/ option+ left/ right、ctrl/ cmd+ D。また、クラス名とファイル名は、ハイフンが機能する唯一の場所です。ハイフンはほとんど常に引用符やcssで囲まれているためです）。 。しかし、ショートカットが適用されます。

変数、クラス名、IDに加えて、ファイル名の規則も確認する必要があります。そしてGit Branches。

私のオフィスのコーディンググループは、1か月か2か月前に、名前の付け方について話し合う会議を実際に開きました。gitブランチの場合、321-the_issue_descriptionまたは321_the-issue-descriptionのいずれかを決定できませんでした。（私は321_theIssueDescriptionが欲しかったのですが、同僚はそれが好きではありませんでした。）

例、他の人々の標準での作業をデモンストレーションする...

Vue.jsには標準があります。実際、彼らはいくつかのアイテムに対して2つの代替標準を持っています。ファイル名の両方のバージョンが嫌いです。"/path/kebab-case.vue"またはをお勧めします"/path/TitleCase.Vue"。前者は、特にその一部の名前を変更しようとしない限り、名前を変更するのが困難です。後者は、プラットフォーム間の互換性には適していません。私は好むでしょう"/path/snake_case.vue"。ただし、他の人や既存のプロジェクトと作業する場合は、すでにレイアウトされている標準に準拠することが重要です。したがって、Vueのファイル名には完全に文句をつけますが、kebab-caseを使用しています。従わないと、vue-cliがセットアップする多くのファイルを変更することになります。

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

所有

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

車の新しい右折

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

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

注：動詞（アクション）は過去形（回転、実行、実行など）である必要があります。

関係

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

車の新しいターン右ライトホイール左ターン左

• 車の新しい右折（所有権の規則に従います）
• wheel-left-turned-left（所有権の規則に従います）
• car-new-turned-right_wheel-left-turned-left（リレーションシップルールに従います）

最終メモ：

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

CSS IDとクラス名にハイフンが好まれるもう1つの理由は機能です。

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

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

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

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

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

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