Як вирішити невикористані проблеми CSS

Я виконую кілька швидкісних тестів у блозі, і я завжди отримую скарги на невикористаний CSS. Але це не CSS, яким я ніколи не користуюся, він просто не використовується на цій конкретній сторінці.

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

Я не думаю, що використання різних CSS-файлів на різних сторінках - це шлях, я думаю, вам набагато краще просто створити один великий файл, який можна кешувати.

Зараз є елегантний спосіб боротьби з цим, чи ви просто дотримуєтесь цього.

Ваше твердження, що вам краще з одним, більшим CSS-файлом, є правильним. Коли gzipped, ймовірно, це буде лише кілька КБ, і їх слід кешувати, щоб не було великих витрат. Але є кілька речей, які варто перевірити.

Якщо деякий CSS використовується коли-небудь на одній сторінці, можливо, у цьому випадку буде краще розмістити CSS на цій сторінці в деяких тегах стилів. (Примітка. Це може ускладнити підтримку, особливо коли згодом ви вирішите використовувати подібний стиль в іншому місці.)

Якщо ви візьмете найпопулярніші сторінки (наприклад, сторінки, що становлять 50% + перегляд ваших сторінок) і виявите, що на цих сторінках використовується лише дуже невелика кількість вашої CSS, користувачі можуть швидше розділити її на два файли CSS. Тепер нових користувачів, які відвідують найпопулярніші сторінки, завантажувати набагато менше. На інших сторінках є один додатковий запит HTTP, але це не велика справа.

Переконайтеся, що ваш CSS добре оптимізований. По можливості уникайте селекторів нащадків. Якщо права частина селектора занадто загальна, то це може сповільнити час візуалізації. Наприклад, .class div {}це буде трохи повільно, оскільки браузер повинен перевіряти кожен <div>елемент сторінки, а потім шукати дерево DOM до самого верху, щоб знайти (чи ні) елемент із класом.

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

Я думаю, вам набагато краще просто створити один великий файл, який можна кешувати.

Так, це має сенс, якщо немає набору сторінок, для яких потрібен додатковий біт CSS, і в цьому випадку ви можете включити його до них.

Існує зручний маленький плагін Firefox під назвою Dust-Me Selectors , який перевіряє ваш CSS та повідомляє про невикористані правила. Однак це не працює з останньою версією Firefox (v8.0), що шкода.

PS: Якби я був ти, я б взяв CSS Lint із щіпкою солі - є школа думки, яка говорить про те, що її "рекомендації" є педантичними та просто непомірними. (Більш детально дивіться переконливу статтю Метта Вілкокса, " CSS Lint шкідливий " ). У кращому випадку це зовсім неофіційно ... і, давайте, поглянемо, чи справді нам потрібен ще один інструмент / псевдостандарт для задоволення?

Найбільш оптимізований і масштабований спосіб, з яким я можу уявити собі справу, складається з:

1. Створення основного файлу CSS для всього, що стосується "глобальної області" (наприклад, дизайн сайту, глобальні класи, бібліотеки, плагіни тощо).

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

3. Можливо, роблячи різні файли CSS для конкретних матеріалів для браузера, які ви завантажуєте лише тоді, коли відвідувач має відповідний браузер.

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

Також пам’ятайте, що ці 3 «шари» файлів CSS будуть кешовані як один файл CSS.