Хак с весом селекторов CSS

css-02-02-15-miniВ больших проектах при разрастании CSS файлов получается не очень радостная ситуация. Из-за большого количества правил возникает трудность с тем, чтобы определить, какие стили должны быть применены к конкретному элементу. Какие-то стили наследуется, что-то определено через целую цепочку всевозможных селекторов, где-то используется .class, где-то #id, а где-то вообще inline-style.

 

Чтобы изменить стили для элемента, нам приходится играться с весами селекторов. Чтобы облегчить нашу работу, мы можем следовать нескольким рекомендациям:

  1. Никогда не использовать ID селекторы в CSS. У них нет никаких преимуществ по сравнению с class.
    • Все, что можно сделать с ID, можно сделать и с class.
    • ID не могут быть переиспользованны.
    • Вес ID очень большой. Перебить ID нельзя даже сотней цепных class-ов.
  2. Не создавайте излишних селекторов. Если .header-nav {} прекрасно работает, то не используйте определение .header .header-nav {}. В этом случае ничего не изменится и никакой выгоды от этого не будет.
  3. Не конкретизируйте селекторы, пока это действительно не понадобится. Если .nav {} работает, то не используйте ul.nav {}. Такая запись лишь сократит варианты использования данного класса .nav, а так же повысит вес селектора без очевидной пользы.
  4. Заставьте себя использовать .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 способа изменения веса селектора, но помните, что все же это хаки и не стоит ими сильно увлекаться.

На этом все. Спасибо за внимание!

 

 

Автор статьи: Alex. Категория: CSS
Дата публикации: 02.02.2015
Ищем авторов!
Интернет-магазин редких игрушек из мира Minecraft
[subscribe2]