<div id="example-value">o <div id="example_value">?
Este sitio y Twitter usan el primer estilo. Facebook y Vimeo: el segundo.
¿Cuál usas y por qué?
Respuestas:
Utilice guiones para garantizar el aislamiento entre su HTML y JavaScript.
¿Por qué? vea abajo.
Los guiones son válidos para usar en CSS y HTML, pero no para objetos JavaScript.
Muchos navegadores registran ID de HTML como objetos globales en el objeto de ventana / documento, en proyectos grandes, esto puede convertirse en un verdadero problema.
Por esta razón, uso nombres con guiones de esta manera, los identificadores HTML nunca entrarán en conflicto con mi JavaScript.
Considera lo siguiente:
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>
Si el navegador registra ID de HTML como objetos globales, lo anterior fallará porque el mensaje no está 'indefinido' e intentará crear una instancia del objeto HTML. Al asegurarse de que una identificación HTML tenga un guion en el nombre, se evitarán conflictos como el siguiente:
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>
Por supuesto, puede usar messageText o message_text, pero esto no resuelve el problema y podría encontrarse con el mismo problema más adelante en el que accedería accidentalmente a un objeto HTML en lugar de uno de JavaScript.
Un comentario, todavía puede acceder a los objetos HTML a través del (por ejemplo) objeto de ventana usando window ['message-text'];
window['message-text'];
Recomendaría la guía de estilo HTML / CSS de Google
Se establece específicamente :
Separe las palabras en ID y nombres de clases con un guión . No concatenar palabras y abreviaturas en los selectores con ningún carácter (incluido ninguno) que no sean guiones, para mejorar la comprensión y la capacidad de escaneo.
/* 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 {}
BEMnotación?
Realmente se reduce a las preferencias, pero lo que lo influirá en una dirección particular podría ser el editor con el que codifica. Por ejemplo, la función de autocompletar de TextMate se detiene en un guión, pero ve las palabras separadas por un guión bajo como una sola palabra. Así que los nombres de clase y los identificadores the_postfuncionan mejor que the-postcuando se usa su función de autocompletar ( Esc).
Creo que esto depende totalmente del programador. También podrías usar camelCase si quisieras (pero creo que se vería incómodo).
Personalmente prefiero el guión, porque es más rápido escribir en mi teclado. Por lo tanto, diría que debe elegir lo que le resulte más cómodo, ya que ambos ejemplos se utilizan ampliamente.
Cualquiera de los dos ejemplos es perfectamente válido, incluso puede agregar ":" o "" a la mezcla. como separadores de acuerdo con la especificación w3c . Yo personalmente uso "_" si es un nombre de dos palabras solo por su similitud con el espacio.
ZZ:ZZtendría que escaparse como ZZ\00003AZZ(CSS2 y superior).
En realidad, algunos frameworks externos (javascript, php) tienen dificultades (¿errores?) Con el uso del hypen en los nombres de id. Utilizo guión bajo (también lo hace 960grid) y todo funciona muy bien.
Sugeriría subrayar principalmente por un efecto secundario de JavaScript que estoy encontrando.
Si tuviera que escribir el código a continuación en su barra de ubicación, obtendría un error: 'ejemplo-valor' no está definido. Si el div fuera nombrado con guiones bajos, funcionaría.
javascript:alert(example-value.currentStyle.hasLayout);document.getElementById("example-value"), lo que funcionará bien.