Правильные CSS селекторы

css

Довольно часто нахожу в различных проектах небрежное отношение к CSS селекторам. Хотя современные браузеры и позволяют не обращать особого внимания на их написание, все же я рекомендую пользоваться основным правилом.

В сложном селекторе самый правый селектор должен быть как можно лучше определен (специфичен).

Это вызвано тем, что браузеры ищут  DOM элементы по CSS селекторам справа налево.

Например: селектор div.class1 p хуже чем селектор div p.class2 в том смысле что в первом случае просматриваются все элементы p  и их родители, удовлетворяющие div.class1, а во втором набор p для которых выполняется поиск в глубину уже меньше — только для тех p у которых задан класс class2.

По этой же причине селектор .class1 .class2 хуже, чем селектор .class1 > .class2, т.к. в первом случае сначала  будет осуществляться поиск всех элементов с классом .class2, а затем проверяться, чтобы хоть у одного из его предков (вплоть до элемента html ) был класс .class1. Во втором случае проверяться будут только непосредственные родители элементов с классом .class2.

Запись опубликована в рубрике HTML/CSS с метками . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *