web-dev-qa-db-ja.com

「class」および「id」HTML属性の命名-ダッシュと下線

<div id="example-value"> または <div id="example_value">？

このサイトとTwitterは最初のスタイルを使用しています。 FacebookとVimeo-2番目。

どちらを使用しますか？

htmlcoding-stylenaming-conventions
107
Emanuil Rusev

ハイフンを使用して、HTMLとJavaScriptを確実に分離してください。

どうして？下記参照。

ハイフンはCSSおよびHTMLで使用できますが、JavaScriptオブジェクトでは使用できません。

多くのブラウザは、HTMLプロジェクトをウィンドウ/ドキュメントオブジェクトのグローバルオブジェクトとして登録します。大きなプロジェクトでは、これは非常に苦痛になります。

このため、HTML IDがJavaScriptと競合しないように、ハイフンで名前を使用します。

以下を考慮してください。

message.js

message = function(containerObject){
    this.htmlObject = containerObject;
};
message.prototype.write = function(text){
    this.htmlObject.innerHTML+=text;
};

html

<body>
    <span id='message'></span>
</body>
<script>
    var objectContainer = {};
    if(typeof message == 'undefined'){
        var asyncScript = document.createElement('script');
        asyncScript.onload = function(){
            objectContainer.messageClass = new message(document.getElementById('message'));
            objectContainer.messageClass.write('loaded');
        }
        asyncScript.src = 'message.js';
        document.appendChild(asyncScript);
    }else{
        objectContainer.messageClass = new message(document.getElementById('message'));
        objectContainer.messageClass.write('loaded');
    }
</script>

ブラウザがHTML idをグローバルオブジェクトとして登録すると、メッセージは「未定義」ではないため、上記は失敗し、HTMLオブジェクトのインスタンスを作成しようとします。 HTML IDの名前にハイフンが含まれていることを確認することにより、以下のような競合を防ぎます。

message.js

message = function(containerObject){
    this.htmlObject = containerObject;
};
message.prototype.write = function(text){
    this.htmlObject.innerHTML+=text;
};

html

<body>
    <span id='message-text'></span>
</body>
<script>
    var objectContainer = {};
    if(typeof message == 'undefined'){
        var asyncScript = document.createElement('script');
        asyncScript.onload = function(){
            objectContainer.messageClass = new message(document.getElementById('message-text'));
            objectContainer.messageClass.write('loaded');
        }
        asyncScript.src = 'message.js';
        document.appendChild(asyncScript);
    }else{
        objectContainer.messageClass = new message(document.getElementById('message-text'));
        objectContainer.messageClass.write('loaded');
    }
</script>

もちろん、messageTextまたはmessage_textを使用できますが、これは問題を解決せず、JavaScriptの代わりに誤ってHTMLオブジェクトにアクセスするという同じ問題に後で遭遇する可能性があります

1つの注意点として、window ['message-text'];を使用して、（たとえば）windowオブジェクトからHTMLオブジェクトにアクセスできます。

129
Raatje

Google HTML/CSSスタイルガイド をお勧めします

それ 具体的に述べる ：

IDとクラス名の単語をハイフンで区切ります。セレクター内の単語と略語をハイフン以外の文字（まったく含まない）で連結しないでください。理解とスキャンのしやすさを向上させます。

/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}

/* Not recommended: uses underscore instead of hyphen */
.error_status {}

/* Recommended */
#video-id {}
.ads-sample {}
81
Klas Mellbourn

それは本当に好みに帰着しますが、特定の方向にあなたを揺さぶるのはあなたがコーディングするエディタかもしれません。たとえば、 TextMate のオートコンプリート機能はハイフンで停止しますが、アンダースコアで区切られた単語は単一の単語として認識されます。したがって、クラス名とIDにはthe_postthe-postオートコンプリート機能を使用する場合（Esc）。

4
Doug Neiner

これは完全にプログラマー次第だと思います。必要に応じてcamelCaseを使用することもできます（しかし、それは厄介に見えると思います。）

私は個人的にハイフンを好みます。キーボードで入力する方が速いからです。したがって、どちらの例も広く使用されているため、最も快適なものを選択する必要があります。

3
adamse

どちらの例も完全に有効です。「：」または「。」をミックスに含めることもできます。 w3c spec による区切り文字として。個人的には、スペースとの類似性のために2ワードの名前である場合は「_」を使用します。

2
Myles

読みやすいので、最初のもの（1〜2）を使用します。ただし、画像の場合はアンダースコア（btn_more.png）を好みます。キャメルケース（oneTwo）は別のオプションです。

1
3zzy

実際、一部の外部フレームワーク（javascript、php）には、ID名にハイフンを使用するのに問題（バグ？）があります。私はアンダースコアを使用し（960グリッドも使用）、すべてがうまく機能します。

1
DavidHavl

主に私が遭遇しているjavascriptの副作用の理由のためにアンダースコアをお勧めします。

ロケーションバーに以下のコードを入力すると、エラーが発生します。「example-value」は未定義です。 divにアンダースコアが付いている場合、機能します。

javascript:alert(example-value.currentStyle.hasLayout);
0
jgreep