Avoid to use colons and periods in the id attribute

According to the HTML specifications, a valid `id` can consist of almost characters except ASCII whitespace. Assume that we have an element representing an user's email address:

<div id="user.email" />

In order to access the element, the `getElementById()` method accepts all of three ways passing the `id`:

// They return the same element
document.getElementById('user.email');
document.getElementById('user\\.email');
document.getElementById('user\\\\.email');

But these methods return different results if you are using jQuery library:

// Function				// Returned element
$('#user.email'); // <div id="user" class="email" />
$('#user\\.email'); // <div id="user" class="email" />
$('#user\\\\.email'); // <div id="user.email" />

As you see, the first two methods will find an element with `id` of `user` and has `email` class. In order to get the correct element, we have to escape the `id` using double backslashes (`\\`). It also happens if we use the same value in CSS:

#user.email {
    ...;
}

All the styles declared within `#user.email { ... }` has effect on the element with `id` of `user` and has the `email` class.

The styles aren't applied to element with `id` of `user.email`. To define the styles for our element, we have to escape the selector. But this time, it requires a single backslash only:

#user\\.email {
    ...;
}

Avoid using the special characters in the `id` and `class` attributes will help us get rid of the confusion and errors above. If it's not possible to get rid of colons and periods (for example, the `id` attribute is generated by the server side), then you can use the single backslash as above, or use the attribute selector. Note that it has a lower specificity than the `id` selector:

[id='user.email'] {
    ...;
}

Avoid to use colons and periods in the id attribute

See also