По мере увеличения кодовой базы и трафика на сайте, в игру вступает особый набор навыков, позволяющий оптимизировать некоторые процессы, с целью повышения производительности.
Одной функциональностью CSS часто неосознанно злоупотребляют — это селекторы.
Выбор элементов в CSS влияет на производительность, в том числе, на то, как быстро отображается страница..
Чтобы определить, к каким конкретно элементам применить стили, браузер начинает обработку с правого края селектора (ключевой селектор) и движется влево.
У селекторов есть встроенное поведение относительно производительности, и, ссылаясь на Стива Саудерса (Steve Souders), отсортировать CSS-селекторы от более к менее производительным можно, например, так:
- ID: #header
- Класс: .promo
- Тип: div
- Соседний элемент того же уровня: h2 + p
- Дочерний элемент: li > ul
- Вложенный элемент: ul a
- Общий селектор: *
- Атрибут: [type="text"]
- Псевдоклассы/-элементы: a:hover
На производительность общего селектора в первую очередь влияет ключевой селектор. Ключевой селектор - это крайняя правая часть CSS-селектора, которую браузер видит в первую очередь.
Пример, в котором свойство а будет выступать в роли ключевого селектора:
.header .nav ul li a
По сути, перенасыщенные селекторы - это избыточная вложенность CSS-селекторов, например:
html body .wrapper #content a {}
Вот более простой способ сделать тоже самое:
#content a {}
Следовательно, хорошей практикой будет избегать избыточной вложенности ненужных CSS-селекторов. Такой подход даст несколько преимуществ:
- CSS-файлы будут иметь меньший размер, а это может ускорить загрузку страницы
- Улучшится читабельность кода
- Увеличить производительность рендера CSS
CSS-селекторы действительно могут различаться по производительности, однако очень сложно написать низкопроизводительный CSS-код, который существенно будет влиять на скорость рендера страницы.
Выпуская новые версии, браузеры только улучшают свои показатели в скорости рендеринга CSS, поэтому низкая производительность CSS-кода будет заметна, если на одной странице будут тысячи, а то и десятки тысяч DOM-элементов.
Однако стоит все-же помнить про эффективность и правила хорошего тона, не использовать * в каскаде, избегать больших комбинаций CSS-селекторов и перенасыщенных селекторов.
Пример того, что необходимо избегать
div:nth-of-type(3) ul:last-child li:nth-of-type(odd) * { font-weight:bold }
Самый оптимальный вариант - подойти грамотно к именованию классов и CSS-разметке. Это, как минимум сделает Ваш код более читабельным и уменьшит размеры HTML-файлов и CSS-файлов. Что в свою очередь поспособствует к более быстрой загрузке всей страницы, так-как сумарный размер загружаемых ресурсов будет уменьшен.