Code Ready | Frontend
Быстро и просто обнуляем специфичность селекторов!
Одна из самых частых причин, почему стили не применяются, это разросшаяся специфичность селекторов.
Со временем каждый новый селектор должен быть сложнее предыдущего:
.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 | #совет Если у вас установлено приложение,
вы можете сразу перейти в канал