current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free.
up vote 1 down vote favorite

I recently installed a csslint package for my Atom text editor. I keep getting warnings saying "Don't use IDs in selectors." I found this weird since I've always been using IDs in selectors in CSS, and I haven't really run into any coding or syntactic problems using them.

On StackOverflow, I found posts, like this one, stating that I shouldn't use IDs because they have priority over classes. However, I found another post that states I should use IDs because they have priority over classes. I understand both of these posts, but I still don't know if I should continue to use them or not.

Lets say I have this code as an example:

HTML

<div id="opening-subject-container">
    <div class="subject"></div>
    <div class="subject"></div>
    <div class="subject"></div>
</div>
<div id="body-subject-container">
    <div class="subject"></div>
    <div class="subject"></div>
    <div class="subject"></div>
</div>

CSS

.subject {
    width: 100%;
    height: 20px;
}
#opening-subject-container .subject {
    background-color: red;
}
#body-subject-container .subject {
    background-color: blue;
}

where I want the first subjects in the opening container to be red and the remaining subjects in the body container to be blue.

If I shouldn't ever use IDs in CSS selectors, what should I use instead?

Thanks for everyone's advice. I decided to stick with using IDs since they are convenient and I am able to keep track of when I should use an ID and when not to. I got tired of the warning messages in the lint, so I just changed the source code and deleted some rules that display warnings like this.

share|improve this question
6  
I have an absolute rule about saying never to do something: never make an absolute rule saying never do something. –  Snowman Feb 3 at 17:52
    
I used to care about such front-end quibbles like these until I realized it was just HTML-nerd code masturbation with very little or no real-world impact on the kinds of stuff I work on. –  Graham Feb 3 at 20:21
    
RE your edit: I think you did the right thing. This is what linters are for. They expose common pitfalls, and if, after examining the reasoning behind them you decide they don't apply, then customize the linting rules to your specs and move on with life. –  Eric King Feb 3 at 20:24
    
Think about it, when you need a third list which contains data of the same class (opening for example) you would have to duplicate you css to specifically style it. Because you can use an ID only once. With classes you could just copy the html and styling will fit. Also semantically makes sense because it's the same sort of data which because of that gets the same class. –  Luc Franken Feb 4 at 6:22

6 Answers 6

up vote 2 down vote accepted

ID's are needed to be unique while classes tend to group several elements' style together. I read somewhere it as this analogy :

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

Student ID cards are distinct. No two students on campus will have the same student ID card. However, many students can and will share at least one Class with each other.

Moreover , ID elements tend to have higher priority over other selectors which makes it harder to reapply rules on them. There was an stackoverflow answer regarding some JS function selecting only first occurence of same ID elements too (I'll include link asap).

EDIT : try getting a bunch of elements by using getElementByID() in js and you'll notice what I was trying to say.

On the other hand , IMO you shouldn't take csslint complaints too strictly on your css rules. Some of them are flawed by nature.

reference

share|improve this answer
    
What this says is mostly true; it just does not answer the question asked, at all, so I wonder what the question really was since this was accept. –  Jukka K. Korpela Feb 3 at 23:43
    
@JukkaK.Korpela the answer is 'class'es. And I have just included relevant information for OP so that he gets an idea about the 'why and whats' :) –  Abhinav Gauniyal Feb 4 at 15:47
    
That answer is still just implicit, and what’s worse it’s just an opinion, and it tends to confuse more than help. It is not a correct answer to the question “what should I use instead of id selectors", because there is no correct answer; the question is flawed, based on false premises, assuming a linter to be correct in its instructions. –  Jukka K. Korpela Feb 4 at 17:38
up vote 0 down vote

This is what I generally stick to.

The main purpose, in my opinion, of having a separate css file is that it may be shared among multiple pages, which may use the styles in different ways. By using css classes instead of IDs, it is less restrictive, letting you not worry about duplicate IDs, while the lower specificity allows easier customisation of the style (either in another css file, or in the HTML head).

When writing css in the HTML head, I think using IDs is fine when you are referencing a particular element on the page. You may later decide that the css referencing IDs would be useful on another page. As long as you keep the css in the head, rather than inline, it should be easy enough to refactor it into a separate css file, replacing IDs with classes where appropriate.

share|improve this answer
up vote 1 down vote

There are many reasons to select by an id. I think the spirit of that message from lint is that you should primarily apply styling by classes.

Selecting by id can be the exception where your styling is shared across similar elements, except this one, or only this one.

You can use classes to act as an id, but I think thats probably evangelism. That'd be like the guys that insist to never use a table even when a table is perfectly appropriate.

share|improve this answer
up vote -2 down vote

If your tool says “Don't use IDs in selectors”, just throw it away and get a better tool. There is no reason to spend time and energy in “understanding” messages from a linter that does not understand the topic it is purported to cover.

share|improve this answer
2  
Perhaps you can edit your answer to include some references to back up your statement. If someone were to post a similar answer supporting the opposite position, how would a reader know which one to pick? –  Dan Pichelman Feb 3 at 18:11
    
Anyone or any program who claims “don’t use IDs in selectors” or similar things (saying that some undeniably valid constructs are “bad”) should back that up with references or facts. If a linter said “don’t use letter ‘a’ in identifiers” and someone said it is bogus, would you downvote that statement and ask for references? –  Jukka K. Korpela Feb 3 at 18:57
    
+1 it didn't need to be so belligerent but I agree that the tool is wrong to assert such an absolute don't. –  Andrew Hoffman Feb 3 at 19:59
    
To be fair to csslint, it's not an "absolute don't". The justification says "it is much preferred to use classes", which is a more moderate position, and certainly allows other informed choices. Linters are opinionated by nature, and they're usually customizable by design because not everybody shares all the same opinions. I certainly wouldn't react to such a suggestion with "just throw it away and get a better tool" without first exploring the justifications behind the opinions. –  Eric King Feb 3 at 20:32
1  
@JukkaK.Korpela I did quote the source in my answer above. Took me 30 seconds of research. You should try it sometime. –  Eric King Feb 4 at 4:15
up vote 0 down vote

Using ids is like using singletons, and singletons are not very good style. For prototype, yes, but in you're trying to make things right, do not presume that "this kind thing will always be here once and only once" unless you know for sure. It's more flexible to be prepare for 0 and many, not just for 1.

And of course, the CSS precedence is valid concern as well.

Eg. in your example there should be class="opening subject-container" and class="body subject-container" and you can select yourself if the style is applicable to all .opening things or only to .opening.subject-container, plus you can style things common to all .subject-containers as well. Just a possible example.

share|improve this answer
up vote 2 down vote

I think the gist of the argument, for those that agree with it, is to use class for css selectors instead of id. This avoids unintended css precedence rules from kicking in.

If you know what you're doing (re class vs id selectors), and it works for you, I wouldn't change just for the sake of changing, though.

From http://csslint.net/about.html:

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.

share|improve this answer
    
Class and id selectors have their roles; CSS has both of them for a reason. This answer quotes a messy argument that is not backed up with any facts or references. An id selector can be reused just like a class selector; it just has different role. The id selector is no less (and no more) “coupled with the HTML” than the class selector. –  Jukka K. Korpela Feb 3 at 19:02
    
@JukkaK.Korpela Just for the record, I'm not endorsing the argument, just quoting it. The question asks what's the suggested alternative, and the answer is clear. –  Eric King Feb 3 at 20:11

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.