css/no-id-selectors

Dlaczego

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.

Poprawka

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).

Przykłady

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

Źródła

• MDN, Specificity
• W3Schools, CSS Specificity

Przeczytaj w terminalu

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