Продуктивність вебсайтів є важливою темою для кожного фронтенд-розробника, оскільки вона відіграє вирішальну роль у досвіді користувача. Краща продуктивність означає більш плавний досвід, що створює непомітне уподобання до вашого сайту і збільшує ймовірність того, що користувачі повернуться. Щоб досягти цього, потрібно розкласти задачу на менші, керовані елементи.
У цій статті я хочу зосередитись на одному з цих аспектів: продуктивність CSS. У сучасному світі фронтенд-розробки вибір технологічного стеку, який підходить вашому вебсайту, стає дедалі складнішим. Цей посібник розглядає мої найбільш надійні інструменти для роботи з CSS, які я можу впевнено рекомендувати для виробничих систем. Головною метою є зрозуміти основні концепції, а не лише реалізації, що допоможе вам знайти баланс між досвідом розробника, продуктивністю та масштабованістю для довгострокової підтримки.
При роботі з CSS є дві важливі правила, яких слід дотримуватися, щоб уникнути проблем з продуктивністю через стилі:
- Уникайте використання надмірного JavaScript для завдань, які CSS може виконати ефективно самостійно.
- Перезапускайте CSS як можна більше, щоб утримувати ваші таблиці стилів компактними.
Додатково розгляньте можливість розділення вашого CSS на менші частини та завантаження їх з затримкою для оптимізації продуктивності.
Спочатку виберіть стратегію, а потім інструмент для її реалізації.
Не поспішайте; спочатку проаналізуйте підхід.
Існує кілька популярних способів написання CSS, і ось деякі з найбільш відомих. Давайте розглянемо список і обговоримо кожен з них з точки зору досвіду розробника, проєктів, для яких вони підходять найкраще, а також продуктивності.
Простий CSS.
Очевидно, найпоширеніший підхід — це звичайний CSS. Це базовий інструмент, який завжди можна використовувати — нічого складного. Його найбільша перевага — це відсутність складних концепцій. Це відмінний варіант для малих проєктів, які не очікується перерости в великі та складні додатки. Він ідеально підходить для таких додатків, як лендінг-сторінки, особисті сайти чи портфоліо.
Переваги:
- Легко вивчити, немає проблем з налаштуваннями.
- Детальний контроль над кожним елементом стилю.
- Відсутність обмежень у гнучкості.
Недоліки:
- Важко підтримувати по мірі зростання проєкту.
- Підтримка кросбраузерності лежить на ваших плечах.
- Без єдиної системи іменувань можна отримати дубльовані стилі з однаковими ідентифікаторами, що призведе до плутанини та зайвих повторів.
- Обмежені можливості використання вкладеного CSS.
- Мало вбудованих інструментів для повторного використання властивостей.
- Призводить до проблем з продуктивністю, оскільки файл CSS стає занадто великим.
CSS з препроцесорами.
Що стосується досвіду розробника, CSS у поєднанні з препроцесорами може мати переваги перед звичайним CSS. Це не важко налаштувати, але вимагає доброго розуміння найкращих практик, щоб не створити заплутану кодову базу. Найбільш поширеними функціями, які він приносить, є вкладені CSS-селектори, міксини та цикли.
Інструменти, які реалізують стратегію препроцесорів:
Переваги:
- Вводить потужні функції, такі як можливість повторного використання блоків CSS через їх розширення.
- Вкладеність робить код більш структурованим та зручним для читання.
Недоліки:
- Може стати важким для підтримки по мірі зростання проєкту.
- Може призвести до проблем з продуктивністю, якщо CSS-мітка стане надто великою.
- Підтримка кросбраузерності лежить на ваших плечах.
- Без єдиної системи іменувань можна отримати дубльовані стилі з однаковими ідентифікаторами, що призведе до плутанини та зайвих повторів.
- Потребує додаткової конфігурації через бандлери.
- Сповільнює розробку через додатковий етап компіляції, що займає час.
Модульний CSS.
Модульний CSS — це стратегія, коли ваш CSS розділяється на кілька частин, і кожен модуль стає окремим блоком.
Це можна використовувати як з простим CSS, так і з препроцесорами, такими як SCSS. Цю концепцію було введено для вирішення кількох проблем, які виникають, коли проєкти стають більшими. Одна з основних проблем — це розмір бандла. Розділяючи великий файл CSS на кілька частин, браузер може завантажувати CSS паралельно і дозволяє завантажувати лише ті стилі, які зараз потрібні в HTML. Крім того, система іменувань є модульною, що полегшує підтримку. Навіть з кількома назвами класів у кодовій базі не буде жодних колізій після процесу збірки.
Переваги:
- Продуктивний, якщо правильно налаштований.
- Чудовий досвід розробника.
Недоліки:
- Підтримка кросбраузерності лежить на ваших плечах.
- Потребує додаткової конфігурації через бандлери.
- Сповільнює розробку через додатковий етап компіляції, що займає час.
Атомарний CSS.
З точки зору продуктивності атомарний CSS є відмінним варіантом для великих додатків завдяки своєму підходу до написання CSS, який спрямований на мінімізацію розміру CSS бандла. Як атомарний CSS досягає цієї мети? Це просто: він генерує колекцію утилітних класів, де кожна властивість CSS представляється як окремий утилітний клас. Такий підхід забезпечує високу повторюваність кожної властивості CSS і веде до дуже маленького розміру бандла.
Переваги:
- Надзвичайно продуктивний завдяки розміру бандла.
- Легкий для початківців, простий кривий навчання.
Недоліки:
- Відсутня пряма можливість стилізувати вкладені назви класів.
- Може бути важко відслідковувати елементи за назвами класів при перевірці через інструменти розробника.
Інструменти, які реалізують стратегію атомарного CSS:
CSS-IN-JS.
І, зрештою, CSS-in-JS. Це один з найкращих інструментів для покращення досвіду розробника. Багато бібліотек UI, таких як Material-UI та Ant Design, використовують CSS-in-JS для стилізації своїх компонентів завдяки його високій динамічності та мінімальному навантаженню на конфігурацію.
Є кілька інструментів, які реалізують підхід CSS-in-JS, і я хочу поділитися з вами деякими з найбільш цікавих. Насправді, ця тема заслуговує на окрему статтю, щоб глибше зануритися в інструменти CSS-in-JS, оскільки деякі з них мають дещо інші підходи порівняно з більш популярними.
Переваги:
- Середній рівень продуктивності.
- Легкий для початківців, простий кривий навчання.
- Підтримка кросбраузерності.
- Легко повторно використовувати стилізовані блоки.
Недоліки:
- Для великих проєктів можуть виникнути проблеми з продуктивністю, якщо не використовувати техніки розподілу коду.
Висновок.
Підсумовуючи, найбільш ефективними рішеннями для оптимізації продуктивності за рахунок зменшення розміру CSS бандла є стратегії модульного CSS та атомарного CSS. Альтернативно, можна розглянути підхід CSS-in-JS, який добре підходить для динамічних стилів. Однак будьте обережні, щоб це не призвело до значного збільшення розміру вашого JavaScript бандла.
Перекладено з: CSS strategies you should know about. Make your CSS performant.