Від автора: міркувати про монолітних стилях досить складно, так як, зазвичай, CSS файли часто роздуваються. Видалення невикористовуваних стилів CSS має перевести ситуацію в кероване русло. Перш ніж ми почнемо шукати невикористані стилі, варто відзначити, що існує безліч інших стратегій написання обслуговуються стилів. Наші стилі можна розділити на логічні частини (макет сторінки, кнопки, сітки, віджети і т. д.) і використовувати зрозумілу систему іменування (наприклад, БЕМ). Як правило, розробники роблять це ще до того, як шукають невикористовувані правила. Я думаю, це правильно, адже стилі мають довгострокову дію.
Ще одна причина, по якій не так часто урізують правила – просто незручно шукати і видаляти невикористовувані стилі в чому-небудь, що більше маленького веб-проекту. Якщо контент не статичний, як зрозуміти, які правила застосовуються і де?
Інструмент розробника Chrome
Виявляється, інструменти розробника Chrome вже є вбудована функція. Я випробував її на сайті, на якому, як я знав, було багато стилів, які можна видалити. Відчуття були змішані. Поріг входу дуже низький, особливо для розробників, які вже працювали з панеллю розробника Chrome. Встановлювати нічого не потрібно, це приємно.
Що потрібно зробити для перевірки стилів на сайті:
Відкрийте зацікавив сайт
Відкрийте панель розробника
Перейдіть на вкладку audits
Виберіть опцію Web Page Performance і запустіть
У частині результатів «Remove unused CSS rules». Якщо цього немає, значить, у вас немає невикористовуваних стилів. Вітаю! Результат розбитий по стилям. Розбивка не просто файлів, а по блокам style. Реально корисна функція, оскільки нам потрібні тільки ті стилі, які ми писали. Принаймні, в рамках цієї статті.
Чи добре це?
Я не знайшов супер простого способу експортувати результат Chrome. Можна копіювати прямо з блоку, але його спочатку потрібно розгорнути. Це робить розбір результатів трохи незручним. Запуск тесту в браузері ще далі відштовхує нас від роботи з кодом, що, можливо, призведе до того, що ми будемо забувати тестувати сайт.
Висновок: для початку корисно, але не довгострокове рішення.
UnCSS
Для пошуку невикористаних стилів можна задіяти інструменти командного рядка. UnCSS – цікавий екземпляр. Він витягає сторінку через phantomJS і ловить стилі, вставлені через JS. Я дуже хотів спробувати цей інструмент, так як він вирішував мою проблему, адже панель розробника Chrome зовсім не пов’язана з редагуванням коду. З допомогою UnCSS результат можна зберегти прямо у файл, ідеально.
Установка
У мене не вийшло виконати npm install uncss на Ubuntu. Нічого серйозного, виявилося, я забув пару залежностей. Команди для установки потрібних бібліотек, які я запускав:
sudo apt-get update
sudo apt-get install build-essential chrpath libssl-dev libxft-dev
sudo apt-get install libfreetype6 libfreetype6-dev
sudo apt-get install libfontconfig1 libfontconfig1-dev
UnCSS можна інтегрувати в процес білду, але ми зараз опустимо це. Думаю, вставляти його в процес білду не сама хороша ідея. У Addy Osmani є по цій темі хороша стаття. В ідеалі, нам потрібно видаляти невикористовувані стилі прямо з коду, а не просто фільтрувати їх під фінальний продукт.
Можливо, найкращий вихід – робити і те і те. По-перше, запускати його як пребилд крок для оптимізації коду. По-друге, запускати крок білду для оптимізації стилів, які ви не контролюєте.
Використання командного рядка
uncss http://your-site.foo/ > unused-styles.css
Результат розбивається на стилі сайту your-site.com і Chrome, але зберігаються в одному файлі. На моєму сайті є шрифт font-awesome, і всі іконки, які не використовуються на домашній сторінці, потрапили в висновок UnCSS. Зараз мені це неважливо. Їх можна сховати, якщо запустити команду ще раз і вказати ignoreSheets.
Зверніть увагу, що ignoreSheets може приймати рядок (повний URL стилю, який потрібно проігнорувати) або регулярний вираз. З регулярним виразом простіше, так як там менше символів, і воно покриває можливі зміни в шляху до файлу.
–ignoreSheets /.*font-awesome.min.css/
Регулярний вираз передається в слэшах. Так UnCSS перевіряє, чи є аргумент рядком чи ні.
Поодинокі помилки?
(node:20557) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2):
Error: Network Error
Ось таке повідомлення про помилку вискакує при таймауте сторінки. Таймаут можна збільшити з допомогою -t N, де N – кількість мілісекунд (не ставте –t 360, щоб потім дивуватися, чому код не почекав 5 хвилин).
Висновок: UnCSS зручніше, так як ближче до місця, де я редагую стилі. Вихідний файл корисний при виключення непотрібних стилів. Я бачу йому застосування через опції –includeSheets, яка автоматично ігнорує все, що потрапило під регулярний вираз. Зручно, наприклад, сайтів на WordPress, де різні плагіни можуть підтягувати свої стилі, але розробнику потрібні тільки стилі теми style.css і т. д.
Який інструмент використовувати?
Спочатку я вибір віддав UnCSS і зручною командному рядку. Однак поки я писав цю статтю, я спробував їх ще на парі сайтів і отримав менш перспективні результати. Зокрема, у мене є кілька сайтів, створених пару років назад, на яких використовується фреймворк, де задіяні постійні коментарі /*!*…*/. Вони погано працюють з PostCSS, тому й з UnCSS. Я ще не вникав у проблему, але, можливо, більш нова версія PostCSS прощає такі коментарі. Тим не менш, прямо зараз це стало ще одним бар’єром, і я не можу повністю використовувати UnCSS у своїй роботі.
