Как я могу эффективно очищать стили на большом веб-сайте?

Наш веб-сайт находится под постоянным развитием в течение большей части последних пяти лет. Как это бывает, почти все стили для сайта находятся в одном большом файле CSS. Со временем этот файл css вырос до 9000 строк, и я уверен, что некоторые из этих стилей больше не используются, и довольно много стилей обеспечивают дублирующиеся функции.

Сайт написан на PHP/Smarty; существует более 300 шаблонов smarty, и весь сайт содержит более 1000 различных страниц (чтение - уникальные URL-адреса). Я уверен, что он будет продолжать расти - как и файл CSS.

Какой лучший способ очистить этот файл?

Обновить. К сожалению, онлайн-парсеры, в которые я помещал URL-адрес, не будут работать для меня, так как 75% сайтов находятся за входами для имени пользователя и пароля - и в зависимости от логина есть половина десяток разных ролей, каждый из которых имеет свой собственный набор страниц. Существуют также транзакционные элементы (интернет-магазин), где страницы отображаются после (например) оплаты кредитной карты. Я сомневаюсь, что любой онлайн-инструмент сможет справиться с любым из них. Поэтому, если есть инструмент, он должен будет работать с деревом источника.

Ответ 1

Не дожидаясь прохождения каждого файла .tpl и поиская файл для селекторов вручную, я не вижу другого способа.

Конечно, вы можете использовать селектор пылесоса, но вам все равно придется проходить через каждую страницу, использующую файлы .tpl(не каждый URL-адрес, как я знайте, что многие из них будут дублировать).

Звучит как большая работа! Я должен был сделать это один раз раньше, и я сделал именно это, взял меня на неделю.

Другим инструментом является плагин Firebug под названием Использование CSS. Насколько я понимаю, он может работать на нескольких страницах, но может быть разорван, если он используется на всех сайтах. Дайте ему пойти.

Триумф! Просмотрите Неиспользуемый онлайн-инструмент CSS. Введите свой индексный url в поле и voila, через несколько минут - список всех используемых селекторов:) Я знаю, что вы хотите использовать неиспользуемые, но тогда единственная работа заключается в нахождении неиспользуемых в файле (ctrl + f) и удаляя их:)

Обязательно используйте параметр 2nd, они отправят вам по электронной почте результаты сканирования всей веб-страницы. Может потребоваться до получаса, но это намного лучше, чем на неделю. Возьмите кофе:)

Просто протестируйте его, работайте с удовольствием:)

Ответ 2

Я должен был сделать это около 3 лет назад на довольно большом классическом веб-приложении ASP.

Я понял, что на каждой странице есть только конечное количество стилизованных элементов и начинается с их идентификации. Например, я просмотрел основные страницы и определил, что большинство ярлыков выделены жирным и синим цветом, и все кнопки имеют одинаковую ширину (например).

Как только я это сделал, я поговорил с командой, и мы решили, что все, что не соответствует этим правилам, которые я определил, должно соответствовать, поэтому я написал таблицу стилей, основанную на этом предположении.

В итоге у нас появилось около 30 стилей для нескольких сотен страниц. Несколько регулярных выражений-find-and-replaces позже (нам повезло, что исходная разработка использовала достаточно хорошо структурированный HTML), у нас было что-то полезное, которое просто требовало нечетной настройки.

Ключевыми моментами являются:

Цель единообразия на сайте. Другими словами, не предполагайте, что результирующий сайт будет выглядеть точно так же, как оригинал, но стремиться к тому, чтобы он выглядел так же, как сам (однородный) со страницы на страницу.
Удалите очевидные стили сначала (метки/кнопки/абзацы шрифтов/заголовки), а затем задумайтесь о более мелких стилях или уникальных стилях позже

Вы также можете обнаружить, что в отдельных файлах сохраняются уникальные стили (например, страница панели мониторинга, в которой есть уникальные элементы, которые не отображаются в другом месте), чтобы сохранить размер файла. Очевидно, что это зависит от вашего сайта в отношении того, поможет ли это.

Ответ 3

Кроме того, есть много сайтов, которые будут искать их для вас. Как и этот: http://unused-css.com/ Я не знаю, как они измеряются до селекторов пыли, но я знаю, что селекторы Dust-Me не являются Совместимость с Firefox 8.0.

Ответ 4

Вы можете использовать плагин Dust-Me Selectors для FireFox для поиска неиспользуемых стилей:

http://www.sitepoint.com/dustmeselectors/

Если у вас есть карта сайта, вы можете использовать ее, чтобы плагин сканировал ваш сайт:

В диалоговом окне паука есть все элементы управления для выполнения операции паука на сайте. Введите URL-адрес файла XML Sitemap или файла Sitemap для сайта, и программа прочтет этот файл и извлечет все его ссылки. Затем он будет загружать каждую из этих страниц по очереди и выполнять кумулятивную операцию поиска на каждом из них.

Ответ 5

Я еще не вижу хорошего ответа. Я пробовал "Неиспользуемый онлайн-инструмент CSS" и, похоже, работает нормально для общедоступных сайтов. Проблема в том, что у вас есть CSS для показа вашего общедоступного веб-сайта + интрасети (например: wordpress site + login для зарегистрированных пользователей). Страницы интрасети не будут отслеживаться, и вы потеряете стили css.

Моя следующая попытка будет использовать gulp + uncss: https://github.com/ben-eb/gulp-uncss

Вы должны определить все URL-адреса вашего сайта (внешние и внутренние) и (возможно, не уверены), если вы используете сайт с паролем пользователя + в своем браузере, gulp + uncss может войти во внутренний URL-адрес,

Обновление: я вижу, что онлайн-инструмент unused-css имеет решение для входа в систему!