Javascript y CSS, usando guiones

Question

Estoy empezando a aprender algunos javascript y entiendo que los guiones no están permitidos al nombrar identificadores. Sin embargo, en CSS es común usar un guion para ID y clases.

¿Usar un guion en CSS interfiere con la interacción de JavaScript de alguna manera? Por ejemplo, si tuviera que usar getElementByID ("css-dash-name"). He intentado algunos ejemplos usando getElementByID con guiones como nombre para una identificación de div y funcionó, pero no estoy seguro de si ese es el caso en cualquier otro contexto.

Answer 1

Tener guiones y guiones bajos en el ID (o nombre de clase si selecciona por eso) que no tendrán ningún efecto negativo, es seguro usarlos. Usted simplemente no puede hacer algo como:

var some-element = document.getElementByID('css-dash-name'); 

El ejemplo anterior se va a error porque hay un guión en la variable que está asignando el elemento a.

El siguiente estaría bien, aunque ya que la variable no contiene un guión:

var someElement = document.getElementByID('css-dash-name'); 

que el nombramiento de limitación única existe para las mismas variables JavaScript.

Answer 2

Siempre que tenga que direccionar una propiedad de CSS como un nombre de variable JavaScript, CamelCase es el camino oficial a seguir.

element.style.backgroundColor = "#FFFFFF"; 

Nunca se encontrará en la situación de tener que direccionar el ID de un elemento como un nombre de variable. Siempre estará en una cadena, por lo que

document.getElementById("my-id"); 

siempre funcionará.

Answer 3

No, esto no causará ningún problema. Estás accediendo a la ID como una cadena (está entre comillas), por lo que el tablero no plantea ningún problema. Sin embargo, sugeriría que no utilizan document.getElementById ("CSS-guión-name"), y en su lugar usando jQuery, por lo que puedo hacer:

$("#css-dash-name"); 

que es mucho más clara. la documentación de jQuery también es bastante buena. Es el mejor amigo de desarrolladores web.

Answer 4

IDs are allowed to contain hyphens:

• ID y NOMBRE tokens debe comenzar con una letra ([A-Za-z]) y puede ser seguido por cualquier número de letras, dígitos ([0 -9]), guiones ("-"), guiones bajos ("_"), dos puntos (":") y puntos (".").

Y no hay ninguna restricción en el uso de identificadores en JavaScript, excepto si se desea hacer referencia a elementos en el ámbito global. Allí debe usar:

window['css-dash-name'] 

Answer 5

Solo en los casos en que puede acceder a los elementos como propiedades que marcan la diferencia.Por ejemplo, formar campos:

<form> 
    <input type="text" name="go-figure" /> 
    <input type="button" value="Eat me!" onclick="..."> 
</form> 

En el evento onclick no se puede acceder al cuadro de texto como una propiedad, como el guión se interpreta como menos en Javascript:

onclick="this.form.go-figure.value='Ouch!';" 

Pero todavía se puede acceder usando una cadena:

onclick="this.form['go-figure'].value='Ouch!';" 

Answer 6

Otras respuestas son correctas en cuanto a dónde se puede y no se puede utilizar guiones, sin embargo en la raíz de la cuestión, se debe considerar la idea de no utilizar guiones/guiones en su variab nombres de le/class/ID por completo. No es una práctica estándar, incluso si funciona y requiere una codificación cuidadosa para poder usarla.

Considere usar PascalCase (todas las palabras comienzan en mayúscula) o camelCase (la primera palabra comienza en minúscula, las siguientes palabras en mayúscula). Estas son las dos convenciones de nombres más comunes y aceptadas.

Diferentes recursos recomendarán diferentes opciones entre los dos (con la excepción de JavaScript que casi siempre se recomienda camelCase). Al final, siempre y cuando sea coherente en su enfoque, esta es la parte más importante. El uso de Camel o Pascal Case asegurará que no tenga que preocuparse por accesos especiales o corchetes en su código.

Para convenciones de JavaScript, tratar esta pregunta/debate:

javascript naming conventions

Aquí es otra gran discusión de convenciones para CSS, elementos HTML, etc:

What's the best way to name IDs and classes in CSS and HTML?

Answer 7

Usando Hypen (o guión) está OK

Yo también estoy estudiando JavaScript, y por lo que he leído el libro de David Flanagan (JavaScript: The Definitive Guide, 5th Edition) — Le sugiero que lo lea. No me advierte nada sobre el uso de hypen o dash (-) en los ID y las Clases (incluso el atributo Name) en un documento HTML.

Al igual que lo que dijo Parrots, las hiperestructuras no están permitidas en las variables, porque el intérprete de JavaScript las tratará como un signo negativo y/o negativo; pero usarlo en cadenas, está bastante bien.

gusta lo loros y Guffa Dicho esto, puede utilizar los siguientes ...

1. [] (corchetes )
2. '' (comillas simples o comillas simples)

3. "" (comillas dobles o comillas dobles)

   para indicar el JavaScript i nterprete que está declarando cadenas (la identificación/clase/nombre de sus elementos, por ejemplo).

Uso Guión (o un guión) — de 'consistencia'

@KP, que estaría bien si él es el uso de HTML 4.1 o anterior, pero si él está utilizando cualquier versión de XHTML (.eg, XHTML 1.0), entonces eso no puede ser posible, porque la sintaxis XHTML prohíbe mayúsculas (excepto el! DOCTYPE, que es lo único que se debe declarar en mayúsculas).

@Choy, si está utilizando HTML 4.1 o anterior, ir a camelCase o PascalCase no será un problema. Aunque, por coherencia en cuanto a cómo CSS usa los separadores (usa hypen o dash), sugiero seguir su regla. Será mucho más conveniente para usted codificar su HTML y CSS por igual. Y más aún, ni siquiera tiene que preocuparse si está usando XHTML o HTML.