Скорость поиска различных CSS-селекторов на странице
CSS всегда работает быстро, ведь это лишь набор правил, выполняющихся на стороне браузера. Подкрасить ссылки, поменять шрифт и добавить отступ - сильный процессор для этого не нужен. По большому счёту это так.
Но
В современном мире сайты имеют огромное количество стилей, существует множество способов генерации стилей(это раньше можно было только топорно писать в css), а новые свойства выходят регулярно.
Усложнение дизайна, адаптивность, кроссбраузерность и кроссплатформенность(один и тот же GoogleChrome на Windows и Mac может работать по-разному) заставляют увеличивать объём css-кода. Как следствие - оптимизация не будет лишней и на уровне css.
Как работают стили
Стили "привязываются" к элементам DOM-дерева страницы и применяются описанные в css свойства. Именно о "моменте привязки" хотелось бы сейчас поговорить.
Чтобы он проходил максимально быстро - следует привязывать стили по id.
Например:
#box { color: green; }
Такое правило подкрасит все элементы внутри тэга с id равным box в зелёный цвет.
Затем можно привязываться по классу. Это будет чуть медленнее.
Например:
.disco { border: 1px solid black; }
Такое правило сделает черную рамку у всех элементов с классом disco.
Затем можно привязаться ко всем одинаковым элементам.
К примеру:
p { padding-left: 5px; }
Так можно задать левый отступ у всех абзацев.
Привязаться к следующему элементу:
h1 + div { background-color: red; }
Так будет задан цвет фона у контейнера div, следующего сразу за заголовком.
Искать дочерние элементы ещё медленнее:
p > a { text-decoration: none; }
Так мы уберем подчеркивание у ссылок, которые находятся непосредственно в абзацах.
Если брать все дочерние p a { text-decoration: none; } - будет работать ещё медленнее.
Обратиться ко всем элементам:
* { display: block; }
Искать элементы по атрибутам:
[disabled="disabled"] { display: none; }
Такой стиль будет искать все элементы, у которых есть атрибут disabled и он равен disabled.
И, наконец, самое долгое - это поиск по псевдоклассам.
a:hover { opacity: 0.5; }
Так мы зададим прозрачность ссылкам при наведении курсора мыши.