Nombrar atributos HTML de "clase" e "id": guiones frente a subrayados [cerrado]

113

<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é?

html coding-style naming-conventions Emanuil Rusev
fuente
11
Ambos vínculos ahora están rotos
Steve

Respuestas:

135

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

Raatje
fuente
No entiendo algo sobre tu publicación aquí, tal vez puedas aclarar. Entonces, dice que algunos navegadores registran los ID html como objetos globales y que si coloca un guión en el ID, garantizará que no habrá conflicto entre estos objetos generados automáticamente y los que usted crea porque los guiones no están permitidos. . Pero, entonces, ¿cómo crea el navegador estos objetos separados por guiones si los guiones no están permitidos? parece que tendría que eliminarlos, dejándote con el potencial de un conflicto de nombres.
Dallas Caley
@DallasCaley si no lo vio, esta respuesta fue una actualizaciónwindow['message-text'];
Chris Marisic
Ah, creo que lo entiendo. Es extraño que javascript no le permita crear un objeto con un guión en el nombre como un objeto independiente, pero le permitirá crear un objeto con un guión en el nombre si se crea como propiedad de otro objeto. que no tiene un guión en el nombre.
Dallas Caley
Esta publicación realmente me hizo reconsiderar mi posición en casi un 100% de acuerdo con usted desde una posición de no que es una tontería, mi única reserva es su posición sobre el tema, parece evidente que cada identificación debería tener un - en él para evitar el mismo problema a menos que desee específicamente que funcione para algunos ID en particular.
user254694
87

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 {}
Klas Mellbourn
fuente
1
¿Qué pasa con la BEMnotación?
Iulian Onofrei
1
@IulianOnofrei, por supuesto, puede utilizar BEM, pero claramente no se adhiere estrictamente a la Guía de estilo de Google.
Klas Mellbourn
hmm, muy raro. El marco GWT de Google usa camelcase. Verifique esta línea de código <h1 id = "appTitle"> </h1> en el siguiente documento. gwtproject.org/doc/latest/tutorial/i18n.html
karlihnos
4
Google! = Automáticamente correcto. A menudo lo son, pero ser Google no es una justificación suficiente.
Craig Brett
2
Esta es una muy mala idea. Tarde o temprano querrás usar tu nombre en un lenguaje de programación que no admita guiones en los nombres de las variables (básicamente todas), y luego ¡BOOM! Reglas de cambio de nombre idiotas.
Timmmm
5

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).

Doug Neiner
fuente
tienes razón, pero parecerá mucho más complicado en esa "jungla html" circundante
Kamil Tomšík
4

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.

Adamse
fuente
3
esta pregunta es similar y verifica esta respuesta stackoverflow.com/questions/70579/…
Matt Smith
2

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.

Myles
fuente
14
Sí, puede usar dos puntos y puntos para los ID, pero esa es una buena manera de hacer que la persona que escribe el archivo CSS lo odie.
Dave Markle
5
Un identificador HTML ZZ:ZZtendría que escaparse como ZZ\00003AZZ(CSS2 y superior).
McDowell
1
No dije que fuera una buena práctica, dije que era válida.
Myles
5
Suena como una forma divertida de hacer explotar jQuery
Mike Robinson
0

Yo uso el primero (uno-dos) porque es más legible. Para las imágenes, prefiero el subrayado (btn_more.png). Camel Case (oneTwo) es otra opción.

eozzy
fuente
0

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.

DavidHavl
fuente
3
¿Cuáles? De todos modos, la legibilidad del código es algo mucho más importante.
Kamil Tomšík
-1

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);
jgreep
fuente
5
Eso debería ser document.getElementById("example-value"), lo que funcionará bien.
Chuck
Obtengo un problema similar con ASP.NET MVC al especificar un valor para un atributo en el parámetro HtmlAttributes de las funciones auxiliares de Html.
Matthijs Wessels