Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why selecting by ID is not recommended in CSS? [closed]

In CSS Lint, they don't recommend using an id for selecting elements. I trust CSS Lint because it written by smart people who know CSS very good and in depth. But I want to know what are reasons of this? Why is selecting with an id not a good thing?

like image 587
Mohsen Avatar asked Nov 10 '11 18:11

Mohsen


People also ask

Why you should not use ID in CSS?

It is not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again. Even if you don't have more than one element with that style right now, it might come later.

Can an ID be used as a selector in CSS?

The CSS id SelectorThe id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Is it better to use ID or class in CSS?

The basic rule that you need to keep in mind while using classes and ids in CSS is that, id is used for single elements that appear on the page for only once (e.g. header, footer, menu), whereas class is used for single or multiple elements that appear on the page for once or more than once (e.g. paragraphs, links, ...


2 Answers

I disagree with the idea of never using IDs for selecting elements, however I do understand the reasoning.

Oftentimes developers will use a very high specificity selector when the general form will suffice:

#foo #bar #baz .something a {     text-decoration: underline; } 

is probably better written as

.something a {      text-decoration: underline; } 

Additionally, writing styles like:

#foo-1, #foo-2, #foo-3, #foo-4 {     color: #F00; } 

are better written as:

.foo {     color: #F00; } 

Where I differ from CSSLint involves structural IDs that are reused.

I often mark up pages with this structure:

<div id="page">     <div id="page-inner">         <header id="header">             <div id="header-inner"></div>         </header>         <nav id="nav">             <div id="nav-inner"></div>         </nav>         <div id="wrapper">             <div id="wrapper-inner">                 <div id="content">                     <div id="content-inner">                         <article></article>                         ...                     </div>                 </div>                 <div id="sidebar">                     <div id="sidebar-inner">                         <div class="module"></div>                         ...                     </div>                 </div>             </div>         </div>         <footer id="footer">             <div id="footer-inner"></div>         </footer>     </div> </div> 

And because I know that structure is consistent, I don't mind using #page, #header, #nav, #wrapper, #content, #sidebar, and #footer in my css for sweeping region-specific styles. These styles are tightly coupled to this particular structure, which makes them less reusable; because I reuse the structure, they are reusable. The important thing to remember is that using an ID in a selector is very specific, and should be used sparingly.


A few words on specificity:

Generally speaking, one should use the lowest possible specificity selector that makes the correct selection:

If you're targeting all <a> elements, then it makes sense to use a.
If you're targeting all <a> elements within <div class="foo">, then it makes sense to use .foo a.
If you're targeting all <a> elements within <div id="bar">, then it makes sense to use #bar a. However, you could use a lower specificity selector. [id="bar"] a has the same specificity as .foo a, which means that you can still target specific elements by ID without creating selectors with unnecessarily high specificity.

I do not generally recommend using [id="XXXX"] selectors for selecting on the [id] attribute, because it's verbose and may cause confusion. I do recommend using [data-id="XXXX"] selectors for selecting based on custom [data-*] attributes to more closely relate styles to the current state of DOM nodes.

like image 147
zzzzBov Avatar answered Sep 17 '22 22:09

zzzzBov


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.

like image 32
lonesomeday Avatar answered Sep 18 '22 22:09

lonesomeday