Categories

Tag: css

I’ve seen an idea that appears to be gaining momentum: banning the usage of ID selectors in CSS. When I first saw this, I assumed it was the ramblings of a single individual that was venting over an inherited project where ID selectors were being abused, but I’m seeing it pop up more often, and it has me a little concerned. Fortunately, there are some people that are stepping up to show the problems with this idea, and I thought I’d join in. Here are a few quotes I’ve found that I’ve decided to address.

IDs are almost always against the DRY (don’t repeat yourself) principle. For styling, you can always used classes which make your code much more reusable. I personally have stopped using IDs and I believe using IDs is a lazy bad practice, but yea still “valid”.

Yes, IDs are not meant to be repeated! It seems that this is the biggest complaint against ID usage, and what’s funny is that it’s the way the CSS language is meant to work. An ID is a “one-off”. You use it when you are certain you’ll never need it again.

As for being a “lazy bad practice,” I’m a bit confused. If you’re using IDs out of laziness, you may as well use the !important keyword or inline styles. Good CSS coders don’t use IDs because they’re lazy; they use them because the situation calls for it.

I’m totally on the “never use ID’s” thing. If you are having a specifity problem, using a selector that infinitely more powerful than a class is a sledgehammer approach when you need a knife…

…and a class selector is infinitely more powerful than a tag selector. What’s your point? That’s the nature of CSS. You don’t see people trying to advocate a ban on classes for that reason. A knife is great for things that require a knife, but a blanket ban on IDs, is just like a blanket ban on sledgehammers. What happens when you need to tear down a wall? It’s going to take quite some time with that little knife.

The point is that you use the right tool for the job. IDs have their place in CSS and so do classes. Not knowing when to use them is not an excuse for removing them entirely. There will always be developers that use the language inappropriately, and telling them to ignore (or even ban) specific aspects of the language is a detriment to their learning experience. It doesn’t make them better coders, and it contributes to the number of “professionals” that know very little about their field.

I firmly believe that crafting CSS should always focus on re-usability, it should be about creating patterns instead of one-offs. IDs are unique by nature and so work inherently against this. No matter how much you think you’ll only ever use a pattern once, somewhere down the line you’ll find yourself needing it again.

Again with re-usability. CSS that is specific to one website should not be reusable. That’s what CSS frameworks/boilerplates are for. If you find yourself writing the same CSS for every site, then you should probably move it to your framework CSS. If you follow this design pattern, then the unique nature of IDs is perfectly plausible and very helpful. Otherwise, you run into design nightmares trying to override the specificity of your framework CSS with multiple class declarations. CSS such as the following is confusing and a pain to maintain:

.home-page .row .span-6 header nav .link { ... }

Especially when an ID selector does the job, while being more concise and clear:

#home-menu a { ... }

If you find that somewhere later down the line you needed a class instead of an ID, then you didn’t properly plan the structure of your website. Now, I understand that no one is perfect, and in the real world things change, but, that should be the exception and not the rule. Let’s be clear: ID selectors should only be used for areas of a web page that will never appear on the page more than once. If you aren’t sure, use a class — but don’t blame ID selectors for your poor planning.

I have a blanket-ban on IDs in CSS. There is literally no point in them, and they only ever cause harm.

Wow. I can think of multiple reasons to use ID selectors, and it’s very rare that they cause me harm. I really can’t believe that an experienced web designer would even try to validate such a claim, considering that the vast majority of websites make use of ID selectors regularly and have been doing so for many years. “No point?” Clearly, you’re in the minority, as most web experts are finding a purpose for them.

As for causing harm, the only reason that makes sense is if you aren’t using them correctly. This reminds me of the sledgehammer example; use the right tool for the job. Consider this: I have a div with an @id of “logo”. This div will appear once on each page. Using an ID selector is perfectly acceptable. Now, for the sake of argument, suppose I had used a class of “logo” instead. A year from now, this website is inherited by another developer. He needs to make some changes to the logo, but he sees that it uses a “logo” class. Hmmm… should he go ahead and reuse the “logo” class? Who knows? To his knowledge that may be a class that’s used on some other obscure page he doesn’t know about, and making an update would be a risk that bites him later. After all, that’s how classes are supposed to be used. So, what does he do? He either adds another redundant class or writes some weird specificity rule to make sure that he’s only targeting the logo he wants. Using an ID would have made this quite simple — it’s an ID, it’s unique, and it has a clear purpose.

What bothers me the most is that supposed experts in the field of CSS are putting their seal of approval on this idea. Requiring members of your web team to avoid the use of a popular language construct because they may use it incorrectly means that you freely admit your team members are not experts and you never expect them to be. What’s the reasoning behind this? Some programmers have a hard time with C# delegates. Let’s ban them! Some designers don’t know when to use the <address> tag. Let’s ban it! Some coders don’t know when to use single/double quotes in PHP. Let’s require double quotes for everything! Ignorance is not an excuse for limiting your toolset. IDs are a part of CSS for a reason. If you have a hard time with them, then either learn when to use them or let someone else do it. But please don’t push your nonsense on everyone that does use them effectively.

If anyone has a valid use-case for banning ID selectors, let me know. I’ve yet to hear of one, but I’m certainly open to discussion.