Avoid HTML ID's
ID's are not unique. It's possible to have more than one of the same ID in a page.
- ID’s are not unique.
- ID’s break specificity.
- ID’s can cause confusion in tests.
💣 It’s possible to have more than one of the same ID in a page. Try this: when
querySelectorAll is used with an ID selector, will it return one result, or multiple results?
💣 ID’s can make CSS specificity confusing. When ID’s are used for styling, it will have a side effect of increasing the specificity of the CSS rules. Let’s start with a simple HTML document with ID’s and classes:
Some might try to style the forgot password link using
.register-actions a. There might be cases where this won’t work: in our example, it might look like invisible text.
This might happen if a CSS rule was previously defined for an ID selector, like one that might have been used to style the log in link. In essence, styling an ID is much like
!important—it overrules any styles for class names.
💣 Overloaded semantics — Some projects use ID selectors (eg,
💣 Difficult to test — It can be a bit awkward to test, possibly needing a mock
#submit-form element for it.