В больших проектах при разрастании CSS файлов получается не очень радостная ситуация. Из-за большого количества правил возникает трудность с тем, чтобы определить, какие стили должны быть применены к конкретному элементу. Какие-то стили наследуется, что-то определено через целую цепочку всевозможных селекторов, где-то используется .class, где-то #id, а где-то вообще inline-style.
Чтобы изменить стили для элемента, нам приходится играться с весами селекторов. Чтобы облегчить нашу работу, мы можем следовать нескольким рекомендациям:
- Никогда не использовать ID селекторы в CSS. У них нет никаких преимуществ по сравнению с class.
- Все, что можно сделать с ID, можно сделать и с class.
- ID не могут быть переиспользованны.
- Вес ID очень большой. Перебить ID нельзя даже сотней цепных class-ов.
- Не создавайте излишних селекторов. Если .header-nav {} прекрасно работает, то не используйте определение .header .header-nav {}. В этом случае ничего не изменится и никакой выгоды от этого не будет.
- Не конкретизируйте селекторы, пока это действительно не понадобится. Если .nav {} работает, то не используйте ul.nav {}. Такая запись лишь сократит варианты использования данного класса .nav, а так же повысит вес селектора без очевидной пользы.
- Заставьте себя использовать .class, потому что это идеальные селекторы.
Никогда не используйте селекторы тяжелее, чем это необходимо.
Это все очень простые правила и следовать им не так-то трудно.
Уменьшение веса ID
Предположим у вас есть виджет на странице и вы хотите его стилизовать:
<div id="widget">
...
</div>
И, например, мы не можем изменять HTML код виджета, чтобы избавиться от ID. Поэтому мы делаем так:
#widget {
...
}
В результате мы имеем определение для ID в CSS файле, что совсем нехорошо. Вместо этого мы можем сделать следующее:
[id="widget"] {
...
}
Это селектор атрибута. В данном случае это уже определение не для ID, а для элемента. Если говорить точно, то селектор говорит: «Эй, найди мне элемент, у которого есть атрибут id со значением widget».
Прелесть такого подхода в том, что мы снизили вес ID до веса класса. Но это хак.
Безопасное увеличение веса
Увеличить вес селектора мы можем так:
.btn.btn.btn.btn {
...
}
Но я надеюсь, что никогда не придется использовать такую запись на проектах.
Посмотрим пример: jsfiddle.net/csswizardry/3N53n.
Здесь мы видим, что цвет, заданный в .box a {}, перетирает цвет текста кнопки. В итоге текст сливается с фоном кнопки.
Конечно, мы можем исправить это, если поставим !important (jsfiddle.net/csswizardry/3N53n/1), но нет, спасибо, избавимся от этого!
Мы можем добавить дополнительный селектор в секцию .btn {} (23 строка) jsfiddle.net/csswizardry/3N53n/2, но это не самое лучшее решение. Что, если проблема с кнопкой будет не только в .box, а где-либо еще? Каждый раз добавлять новый селектор – плохой вариант.
Поэтому мы продублируем .btn.btn: http://jsfiddle.net/csswizardry/3N53n/3
Это так же не самое лучшее решение, но все же мы увеличили вес селектора и цвет на кнопке теперь такой, какой и должен быть.
Теперь мы знаем 2 способа изменения веса селектора, но помните, что все же это хаки и не стоит ими сильно увлекаться.
На этом все. Спасибо за внимание!
