Javascript and CSS, using dashes

Question

I'm starting to learn some javascript and understand that dashes are not permitted when naming identifiers. However, in CSS it's common to use a dash for IDs and classes.

Does using a dash in CSS interfere with javascript interaction somehow? For instance if I were to use getElementByID("css-dash-name"). I've tried a few examples using getElementByID with dashes as a name for a div ID and it worked, but I'm not sure if that's the case in all other contexts.

Solution 1

Having dashes and underscores in the ID (or class name if you select by that) that won't have any negative effect, it's safe to use them. You just can't do something like:

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

The above example is going to error out because there is a dash in the variable you're assigning the element to.

The following would be fine though since the variable doesn't contain a dash:

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

That naming limitation only exists for the javascript variables themselves.

Solution 2

It's only in the cases where you can access the elements as properties that it makes a difference. For example form fields:

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

In the onclick event you can't access the text box as a property, as the dash is interpreted as minus in Javascript:

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

But you can still access it using a string:

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

Solution 3

Whenever you have to address a CSS property as a JavaScript variable name, CamelCase is the official way to go.

element.style.backgroundColor = "#FFFFFF";

You will never be in the situation to have to address a element's ID as a variable name. It will always be in a string, so

document.getElementById("my-id");

will always work.

Solution 4

IDs are allowed to contain hyphens:

• ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

And there is no restriction when using IDs in JavaScript except if you want to refer to elements in the global scope. There you need to use:

window['css-dash-name']

Solution 5

It would cause an error in this case:

const fontSize = element.style.font-size;

Because including a hyphen prevents the property from being accessed via the dot operator. The JavaScript parser would see the hyphen as a subtraction operator. Correct way would be:

const fontSize = element.style['font-size']

View more solutions

Comments

[Doug Neiner]

+1 Parrots great answer. I would edit it to make it a little clearer that example 1 is the wrong way, and example two is the right way.

[Choy]

Thanks for the concise answer. Exactly what I needed to clear up, that the limitation exists only for javascript variables themselves.

[Choy]

Thanks for the example of an exception where it would pose a problem and how to work around it!

[Jon z]

It's such a bummer, because I'd like for HTML data attributes like "data-something-awesome" to correlate to javascript variables like "var something-awesome", but there's not a great way to do this.. my only option is to mix delimiters in the data attrib (data-somethingAwesome) or to have an inconsistency between the naming in my js and my html.