Why Shouldn't I Use Id Selectors in CSS

Don't use IDs in selectors (CSS) then, what to use instead of IDs?

give them another class for example:

<div class="myClass special"></div>

.myClass.special{
  color: red;
}

Why selecting by ID is not recommended in CSS?

CSSLint gives a guide to why they make their recommendations:

IDs shouldn't be used in selectors because these rules are too tightly coupled with the HTML and have no possibility of reuse. It's much preferred to use classes in selectors and then apply a class to an element in the page. Additionally, IDs impact your specificity and can lead to specificity wars.

(From Disallow IDs in selectors.)

Basically, if you structure your code to use classes rather than IDs, your code can be more general and reusable, which is generally a good thing. Furthermore, specificity is a hard thing to get your head around, and can cause bugs that are hard to find, so if you omit ID selectors, you're less likely to have conflicting rules resolved in unexpected ways.

What's the point of using an id selector?

Here are a few reasons that come to mind:

Direct Linking.

You can link directly to a specific element on the page by adding the id to the end of the url. See this post for examples: Link to an element within the current page

Javascript Compatibility.

A lot of JS libraries utilize the differences between classes and IDs. For example, they will treat classes as an array of elements, assuming you want to iterate over all of the instances of that class. IDs on the other hand are assumed to be singular, and whatever functionality you are trying to achieve will look for only a single instance. This has minor (almost unnoticeable) performance benefits, but can also break many functions if not used correctly.

Specificity.

When targeting elements on a page, specificity always comes into play. Since IDs and classes have different weights, using them incorrectly can cause problems when you are trying to keep styles from over-writing each other. See here for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Browser Compatability.

While browsers are getting better at conforming to modern CSS standards, there are always going to be quirks. Not every selector works in every browser and some CSS tricks may break when your users visit your site using an old version of IE or some random build of Safari. That being said, IDs will always work, no matter what. This may not relate to your specific case, but could help prevent headaches down the road.

Best Practices/Readability.

Most importantly IMO, is the readability aspect. When looking over another developer's code, I assume when I see a class being specified in the CSS that whatever styles they have set will affect multiple areas of the page. This means I shouldn't just go changing things without further research. Opposite of that, if I see an ID being used, I can assume that any changes to that particular style will affect only that one area, and there shouldn't be any surprises for me down the road.

Is there a reason why CSS doesn't support ids and classes, starting from numbers?

In fact, the specification states that classes starting with a number will be interpreted as a dimension [1]:

CSS2 parses a number immediately followed by an identifier as a DIMENSION token (i.e., an unknown unit), CSS1 parsed it as a number and an identifier. That means that in CSS1, the declaration 'font: 10pt/1.2serif' was correct, as was 'font: 10pt/12pt serif'; in CSS2, a space is required before "serif". (Some UAs accepted the first example, but not the second.)

and since we don't know which dimensions will be introduced in the future, dimensions that do not exist in CSS are parsed as unknown dimensions:

In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units). To make ".55ft" a valid class, CSS2 requires the first digit to be escaped (".\35 5ft")

You can use class starting with numbers by escaping the first digit, which is valid according to the W3C CSS validator. check out the plunkr.

[1] Appendix G. Grammar of CSS 2.1

External CSS ID selector not working

The titleImage ID is for the <div> surrounding the image, not the image itself. At the moment, you are trying to find an element with a #titleImage selector inside an image tag.

For the titleLink, the ID is the element, so you can do this instead:

a#titleLink { ... }

However, you'd typically only have one ID on a page, so you could just target the title link by doing this:

#titleLink { ... }

The webpage title should be working as intended. However, I'd still recommend just using the ID. An element with relative positioning doesn't really appear different unless you've given it some style declarations:

#webpageTitle {
    position: relative;
    top: 10px;
    left: 10px;
}

Hope that helps.

Why does this CSS ID selector include the element type?

The answer is they are the same but using the div in front of #id is superfluous and removing it does no harm while leaving it in only takes up space. Some may feel it makes the markup more readable, however, since it identifies the type of element the id is associated with.

I did read, once, that placing the div in front of the id may cause the browser to search through all divs first while just using #id does not but I'd have to look up that reference.

---

Related Topics