Як визначити невикористані визначення css


414

Чи є хороші підходи, які допоможуть визначити невикористані визначення css в проекті? Було витягнуто купу файлів CSS, і зараз я намагаюся трохи прибрати речі.


Коли ви говорите «в проекті» - що саме ви маєте на увазі? Залежно від того, яке середовище ви використовуєте, відповідь може бути різною.
Іван Робінсон,


Я зробив інструмент, який робить досить непогану роботу. Ось моя
кодова

Я написав сценарій, який може зробити це для вас: github.com/kgoedecke/unused-css-parser
Кевін Годекке

Відповіді:


145

Погляньте на розширення Firefox Dust-Me за адресою https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/ .


14
Розширення не працює в Firefox 4
mvark

5
Це оновлення ніколи не з'являлося, і після запитів на форумах SitePoint виявиться, що плагін такий же хороший, як і мертвий.
Майк Б

3
Схоже, автор нещодавно опублікував оновлену версію на своєму власному веб-сайті, навіть версію для Opera. Ознайомтеся з Brothercake.com
Funka

2
На жаль, більше не працює
Джонатан

4
Я написав заміну, проскакує кілька сторінок на вашому веб-сайті (переглядаючи рекурсивно посилання): jitbit.com/unusedcss
Alex

259

Інструменти для розробників Chrome мають аудит вкладку , на якій можуть відображатися невикористані селектори CSS.

Запустіть аудит, потім у розділі Ефективність веб-сторінки див. Видалення невикористаних правил CSS

введіть тут опис зображення


64
це дивовижно, але занадто погано, що ви не можете запустити його на групі сторінок (інакше невикористані правила CSS можуть бути неминучими)
Деймон,

17
Я запускаю інструмент аудиту, і він показує мені невикористаний css, але як його потім використовувати? Чи потрібно вручну шукати кожен елемент і видаляти його?
Timothée HENRY

19
Це лише поточна сторінка. У ньому сказано: "2445 правил (83%) CSS, які не використовуються на поточній сторінці", не дуже корисні.
chhantyal

8
Розгортаючи елемент, ви отримуєте список фактичних правил, які не використовуються. Хоча це не корисно на сайтах, де ви змінюєте DOM на ходу.
Howie

10
Насправді це нещодавно переміщено до покриття - перейдіть на аудит -> поруч із Консоллю внизу є меню (меню з 3 вертикальними точками), і ви можете вибрати там покриття. Просто натисніть на запис і перейдіть.
Грем Річі

65

Я щойно знайшов цей сайт - http://unused-css.com/

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

Також, як і у всіх цих інструментах, мені потрібно було б перевірити, чи він не знімав ідентифікатори та класи без стилю, а використовуються як селектори JavaScript.

Наведений нижче вміст взято з http://unused-css.com/, тому їм вдячний за рекомендації щодо інших рішень:

Латишський Sehgal написав програму Windows для пошуку та видалення невикористаних класів CSS. Я не перевіряв цього, але з опису ви повинні вказати шлях ваших html-файлів та одного CSS-файлу. Потім програма перелічить незадіяні селектори CSS. З екрану екрана схоже, що немає можливості експортувати цей список або завантажити новий чистий файл CSS. Схоже, що служба обмежена одним файлом CSS. Якщо у вас є кілька файлів, які ви хочете очистити, вам доведеться їх очищати один за одним.

Dust-Me Selectors - це розширення для Firefox (для версії 1.5 або новішої версії), яке знаходить невикористані селектори CSS. Він витягує всі селектори з усіх таблиць стилів сторінки, яку ви переглядаєте, а потім аналізує цю сторінку, щоб побачити, який із цих селекторів не використовується. Далі дані зберігаються таким чином, що при тестуванні наступних сторінок селектори можуть бути перекреслені зі списку у разі їх виникнення. Цей інструмент, як передбачається, зможе проглянути весь веб-сайт, але, на жаль, я міг би змусити його працювати. Крім того, я не вірю, що ви можете налаштувати та завантажити файл CSS із видаленими стилями.

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

Liquidcity CSS cleaner - це сценарій php, який використовує регулярні вирази для перевірки стилів однієї сторінки. Він розповість вам про класи, які недоступні в коді HTML. Я не перевіряв це рішення.

Дедвейт - це інструмент покриття CSS. Враховуючи набір таблиць стилів та набір URL-адрес, він визначає, які селектори використовуються насправді та списки, які можна "безпечно" видалити. Цей інструмент є рубіновим модулем і працюватиме лише з веб-сайтом рейок. Невикористані селектори потрібно видалити вручну з файлу CSS.

Гелій CSS - це інструмент javascript для виявлення невикористаного CSS на багатьох сторінках веб-сайту. Спочатку потрібно встановити файл JavaScript на сторінку, яку ви хочете протестувати. Потім вам потрібно викликати функцію гелію, щоб почати очищення.

UnusedCSS.com - веб-додаток із зручним інтерфейсом. Введіть URL-адресу сайту, і ви отримаєте список CSS-селекторів. Для кожного селектора число вказує, скільки разів використовується селектор. Ця послуга має кілька обмежень. Заява @import не підтримується. Ви не можете налаштувати та завантажити новий чистий файл CSS.

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


5
лише зауважте, що unused-css.com не дозволяє завантажувати CSS, не будучи оплачуваним членом, а найнижчий план починається від 29 доларів на місяць! мені здається трохи дорогим за послугу
georgiecasey

1
Я б додав purifycss github.com/purifycss/purifycss до суміші. Він безкоштовний, досить популярний (за зірками в github) та працює з односторінковими програмами.
Дмитро Гончар

21

Google Page Speed може зробити це для вас (він насправді робить набагато більше, ніж просто розповідати, який CSS не використовується). На FireFox він доступний як додаток FireBug. Тоді є і онлайн-версія.


8

Кращий CSS Minifier у C # скидає зайві стилі;

Ви також хочете використовувати для цього Dust-Me.

Майте на увазі, якщо є вміст, який наразі не видно пилу, ви можете викинути потрібні вам стилі.

EDIT: посилання було розірвано, але архів.org має і сторінку, і код.


7

Використання CSS

Розширення Firebug, щоб переглянути, які правила CSS використовуються.

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


6

Схоже, хтось оновив селектори DustMe, щоб знову працювати з Firefox під новою назвою - "CSS Roundup" http://blog.brothersmorrison.com/?p=198


У автора є нова версія, розміщена всього кілька тижнів тому на його веб-сайті, за адресою www.brothercake.com
Funka

цей плагін більше недоступний, а посилання на завантаження є на мертвій
Андреа Мауро


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.