css/no-id-selectors

Why

One id in a selector beats any number of classes, so every later change to that element needs another id or !important. An id also exists once per page, so the style cannot be reused for a second instance of the component.

Fix

Give the element a class and style the class (.site-header). Keep ids for fragment links, for/aria-* references and scripts. When you must target an id you do not control, use the attribute selector [id="widget"], which weighs like a class, or wrap it in :where(#widget).

Examples

/* bad */
#header .nav a { color: inherit; }
/* good */
.site-header__link { color: inherit; }

Sources

• MDN, Specificity
• W3Schools, CSS Specificity

Read it in the terminal

npx github:dawidolko/frontend-skills explain css/no-id-selectors