Оптимізація CSS

Проводячи технічне тестування одного з клієнтських сайтів за допомогою PageSpeed - побачив одне з рекомендованих змін, яке багато хто, навіть імениті розробники, частенько беруть до виду. Оптимізація CSS файлу - не таке вже й критичне зміна, але може здорово допомогти при проходженні валідації і дасть приріст швидкості, нехай навіть невеликий. Для навантажених проектів навіть незначний приріст це вже здорово.

Вся оптимізація полягає в тому, щоб написати CSS файл таким чином, щоб браузер максимально швидко його прочитав. Справа в тому, що вони (в сенсі, браузери) читають файл стилів дещо по іншому, ніж ми з вами звикли читати.

Як браузери читають таблиці стилів?

 Вони читають їх справа наліво. Ми навпаки (я не беру арабів, їм зручніше).

Розглянемо докладніше:

div.nav > ul li a[title]  

 

Побачивши цей селектор, браузер першим справою розбирає a [title], потім переходить лівіше до li, потім ul і, нарешті, div.nav. Самий правий селектор, в даному випадку це a [title] - називають ключовим селектором і по ньому визначають ефективність всієї конструкції в цілому. Як бачимо, браузеру потрібно витратити якийсь час, щоб докопатися до істини. Нехай воно незначне, але якщо таких рядків багато - все закінчується сумно.

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

Які селектори найбільш ефективні?

  

Нижче список селекторів, за зменшенням ефективності.
id (# nav)
class (. nav)
теги (h1, p, li, ul)
суміжні однорангові (h1 + p)
дочірні (ul> li)
нащадки (li a)
універсальний селектор (*)
атрибут (a [rel = "external"])
псевдо-класи та псевдо-елементи

 Здавалося б, використовуємо скрізь id і не знаємо проблем, але не все так просто (хоча багато початківці саме так і роблять) Основна проблема - необхідна унікальність кожного id, звідси невиправдано великий файл стилів, адже потрібно кожен елемент описувати окремо.
З іншого боку - псевдо-класи дуже зручна штука, але і найнеефективніша.

div # block / / ефективно
# block div / / НЕ ефективно

 / / добре
# block
. block
/ / погано
p # block
p.block

 Розберемо приклади. Перше - більш ефективний селектор повинен стояти останнім, для прискорення ідентифікації елемента, до якого застосовується стиль. Друге - класи та ідентифікатори повинні бути унікальні, тому немає сенсу уточнювати, до якого елементу вони відносяться.

 

Кілька порад від розробників Firefox з оптимізації CSS

- уникайте універсальних селекторів
- не використовуйте ідентифікатори разом з тегами і класами
- не використовуйте класи разом з тегами
- уникайте селекторів-нащадків
- теги не повинні містити дочірніх селекторів
- спадкування селекторів - це добре
- використовуйте області дії селекторів

Оригінал статті англійською в репозиторії Гугла. У блозі розробників Mozilla стаття недоступна на момент написання статті, їй вже близько 10 років. Але, з тих пір принципи написання не змінилися і стаття має цінність і зараз.
Що виходить в результаті, чи треба бігти стрімголов і оптимізувати свої таблиці стилів? Ось тут за бажанням, мова йде про мілісекунди прискорення. Можливо, ви навіть не побачите приросту на своїх проектах. Більше того, є якийсь баланс між написанням коду для машин (браузерів в даному випадку) і читаністю. Його теж потрібно враховувати, інакше можна виконати таку оптимізацію CSS, що потім чорт ногу зломить.
Якщо тема зацікавила, рекомендую почитати - Правила написання хорошого коду CSS і технічна оптимізація.

Вдалого дня :)