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

See also