Селекторы: подводные камни
-
Селекторы по ID #
Все селекторы в CSS имеют свой вес, например, селектор по классу весит больше, чем селектор по тегу. Это означает, что если два блока стилей перекрывают друг друга, выиграет тот, у кого тяжелее селектор. Подробнее об этом можно почитать тут.
Селектор по ID — самый тяжелый из всех, а это означает, что если вы задали стили по ID (например,
#header A
), переопределить их будет довольно сложно: для этого потребуется!important
или ещё один селектор с ID.При дальнейшем развитии такого кода проблемы специфичности селекторов буду возникать постоянно, такой код будет очень трудно поддерживать, поэтому постарайтесь не использовать для стилизации селекторы по ID.
-
Составные селекторы #
Такие селекторы следует использовать с осторожностью. Во-первых, по причине специфичности: например, чтобы перебить селектор из двух классов, вам так же придется использовать селектор как минимум из двух классов или
!important
.Во-вторых, понять к чему применится селектор из двух и более частей без подглядывания в разметку может быть затруднительно, а переходы между файлами занимают время и замедляют процесс вёрстки.
Например, сравните:
.post .header SPAN
и.post__author
. У второго селектора ниже специфичность, сразу понятно что это за элемент, а кроме того, стили применятся только к элементам с таким классом, не затрагивая все прочие спаны, которые есть там сейчас, и которые могут появиться там в будущем.Пример может показаться несколько синтетическим, и на простых страницах он не вызовет особых проблем, но в крупных проектах блоки страницы могут иметь очень развесистую структуру, и там сложные селекторы могут оказаться легким способом выстрелить себе в ногу.
Проблему составных селекторов хорошо решает методология именования классов по БЭМ. При её грамотном использовании представление о разметке можно получить не выходя из CSS, а необходимость использовать сложные селекторы возникает крайне редко.
Код с простыми селекторами удобнее читать и приятнее поддерживать, постарайтесь сохранять ваш код простым и легко читаемым.
-
nth-child
иnth-of-type
#С этими и подобными селекторами очень интересно играться, но в долгоживущих проектах их лучше не использовать из-за проблем с читабельностью: не заглядывая в код не всегда можно понять куда целится селектор. Если таких селекторов в коде много, придётся каждый раз выяснять куда целится каждый из них.
Использование таких селекторов вместо классов выглядит заманчивой идеей, но развивать и поддерживать такой код может быть неудобно. Лучше использовать БЭМ-классы с модификаторами.
Исключением могут быть совсем простые случаи, когда надо, например, покрасить строки таблицы через одну. Это удобно делать с помощью
nth-child(odd)
.