Селекторы: подводные камни

  1. Селекторы по ID #

    Все селекторы в CSS имеют свой вес, например, селектор по классу весит больше, чем селектор по тегу. Это означает, что если два блока стилей перекрывают друг друга, выиграет тот, у кого тяжелее селектор. Подробнее об этом можно почитать тут.

    Селектор по ID — самый тяжелый из всех, а это означает, что если вы задали стили по ID (например, #header A), переопределить их будет довольно сложно: для этого потребуется !important или ещё один селектор с ID.

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

  2. Составные селекторы #

    Такие селекторы следует использовать с осторожностью. Во-первых, по причине специфичности: например, чтобы перебить селектор из двух классов, вам так же придется использовать селектор как минимум из двух классов или !important.

    Во-вторых, понять к чему применится селектор из двух и более частей без подглядывания в разметку может быть затруднительно, а переходы между файлами занимают время и замедляют процесс вёрстки.

    Например, сравните: .post .header SPAN и .post__author. У второго селектора ниже специфичность, сразу понятно что это за элемент, а кроме того, стили применятся только к элементам с таким классом, не затрагивая все прочие спаны, которые есть там сейчас, и которые могут появиться там в будущем.

    Пример может показаться несколько синтетическим, и на простых страницах он не вызовет особых проблем, но в крупных проектах блоки страницы могут иметь очень развесистую структуру, и там сложные селекторы могут оказаться легким способом выстрелить себе в ногу.

    Проблему составных селекторов хорошо решает методология именования классов по БЭМ. При её грамотном использовании представление о разметке можно получить не выходя из CSS, а необходимость использовать сложные селекторы возникает крайне редко.

    Код с простыми селекторами удобнее читать и приятнее поддерживать, постарайтесь сохранять ваш код простым и легко читаемым.

  3. nth-child и nth-of-type #

    С этими и подобными селекторами очень интересно играться, но в долгоживущих проектах их лучше не использовать из-за проблем с читабельностью: не заглядывая в код не всегда можно понять куда целится селектор. Если таких селекторов в коде много, придётся каждый раз выяснять куда целится каждый из них.

    Использование таких селекторов вместо классов выглядит заманчивой идеей, но развивать и поддерживать такой код может быть неудобно. Лучше использовать БЭМ-классы с модификаторами.

    Исключением могут быть совсем простые случаи, когда надо, например, покрасить строки таблицы через одну. Это удобно делать с помощью nth-child(odd).