Рефакторинг великих / старих CSS-файлів


13

Зараз я працюю на веб-сайті, розміщеному на 100 000 сторінок, поточний дизайн існує вже понад 5 років, і послідовні оновлення призвели до чотирьох файлів CSS 12000+ рядків.

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

Ми можемо мінімізувати, але це насправді не вирішує проблему, а лише затримує неминучу повторну роботу.

Тож три питання, чи є інструменти там для ...

  • зняття копій великих файлів CSS?
  • сканування сайту та ведення журналу використання CSS-класу та використання ID?
  • чи можна таке сканування досягти за допомогою якогось сценарію, може бути, масляницького ключа?

Відповіді:


17

http://unused-css.com/ Чи є те, що ви запитуєте, і вони мають це сказати: -

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

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

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

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

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

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

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

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