回答:
ハイフンを使用して、HTMLとJavaScriptを確実に分離します。
どうして？下記参照。
ハイフンはCSSおよびHTMLでの使用に有効ですが、JavaScriptオブジェクトには使用できません。
多くのブラウザは、ウィンドウ/ドキュメントオブジェクトのグローバルオブジェクトとしてHTML IDを登録します。大きなプロジェクトでは、これは本当の痛みになる可能性があります。
このため、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オブジェクトにアクセスできます。
window['message-text'];
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 {}BEM表記は？
これは完全にプログラマ次第だと思います。必要に応じてキャメルケースも使用できます（ただし、見た目が悪いと思います）。
キーボードで入力する方が速いので、個人的にはハイフンを好みます。したがって、どちらの例も広く使用されているため、最も使いやすいものを使用する必要があります。
どちらの例も完全に有効ですが、 "："または "。"の組み合わせを使用することもできます。w3c 仕様に従ってセパレータとして。個人的には、スペースとの類似性から2語の名前の場合は「_」を使用します。
ZZ:ZZはZZ\00003AZZ（CSS2以上）としてエスケープする必要があります。
実際、一部の外部フレームワーク（javascript、php）では、ID名にハイフンを使用するのに問題があります（バグ？）。私はアンダースコア（960gridもそうです）を使用しており、すべてうまくいきます。
主に、私が遭遇しているJavaScriptの副作用のために、下線を引くことをお勧めします。
ロケーションバーに以下のコードを入力すると、「example-value」が定義されていないというエラーが発生します。divにアンダースコアを付けた場合、機能します。
javascript:alert(example-value.currentStyle.hasLayout);document.getElementById("example-value")正常に動作するはずです。