Быстро и просто обнуляем специфичность селекторов!

Одна из самых частых причин, почему стили не применяются, это разросшаяся специфичность селекторов.

Со временем каждый новый селектор должен быть сложнее предыдущего:
.header .nav .item a {
color: red;
}

Такой код работает, но он повышает специфичность и делает дальнейшие переопределения всё сложнее.

В CSS есть способ этого избежать, использовать :where():
:where(.header .nav .item a) {
color: red;
}

Особенность :where() в том, что он всегда имеет нулевую специфичность, независимо от того, что находится внутри.

Это значит, что правило применяется, но никогда не мешает более конкретным стилям компонентов. Именно поэтому :where() идеально подходит для базовых и системных стилей:
:where(button) {
font: inherit;
}

:where(a) {
color: inherit;
text-decoration: none;
}

Такие правила не ломают компоненты, легко переопределяются и позволяют обходиться без !important.

Code Ready | #совет