Как вы избавляетесь от неиспользуемого CSS-кода? Часть 1

[Eirik]

За последние 15 лет работы в фронтенде я понят одну простую вещь. Пока проект маленький в этом нет смысла. А когда проект разрастается до большого, то приходит очередной северный редизайн. Потому в старом CSS уже смысла нет.

Редизайны случаются в среднем раз в 2 года. Пишем свежий CSS, чистый и свежий.

[Farmatique]

Это хорошо если так как Вы описываете. А если 5 лет и никакого редизайна нет, а сайт разросся мало того что вширь, так ещё и оброс всякой гадостью типа инлайновых стилей, которые прописаны не в файлах стилей, а в огромном количестве постов и страниц внутри cms. Вот это хороший вопрос… хотя подобные статьи и инструменты все равно не решат этой проблемы

[Eirik]

Делали парсер, который чистил все контент блоки от инлайн стилей. Потом сравнили сколько будет стоить перебрать весь старый СSS, или написать новый под новый дизайн. Оказалось нет смысла делать такую работу при этом поддерживая старый дизай и все мутации за 6 лет. Реши сделать новый стайл гайд и перебрать весь сайт. Так и почистили.

[Akuma]

А от него избавляются? :)
Пожалуй, как и сказали выше, только при полном редизайне. Ну либо если точно уверен, что «это» нигде больше не используется. Лишний Кб трафика погоды не сделает.

[pansom]

Использую стек технологий BEM, строю дерево и css собираю по нему. Модификаторы необходимые в работе прокидываю через deps. Верстаю и горя не знаю.

[ZetaTetra]

Пытаюсь делать на проекте:
Глобальный.css (Идея «светлого будущего» — дублировать глобальный.css на домены 3го уровня)
А мелкие.css для разных разделов.

В итоге бывают коллизии, когда кто-то да закинет какой-то стиль в глобальный.
Или появляются кросс-раздельные css'ы.
Один раз произошло наложение стилей, где ошибочный стиль в глобальном.css правился в мелких.css.

Ну и спасает уникальныость классов: li.list {...} -> li.user_offers {...}
В итоге, чистка, не идеально, но упростилась.
И вместо одного здоровенного файла появилось 2-3 мелких на раздел.

[Fragster]

Вот неплохой вариант: www.purgecss.com

[mSnus]

Сразу захотелось написать тулзу на JS (плагина к Хрому, например), которой можно в полу-автоматическом режиме собрать "карту состояний" сайта — вот страница, вот она же в состоянии "я навелся на кнопку", вот она в состоянии "всплыло модальное окно". А дальше уже анализировать суммарный CSS всех этих состояний. Ну и грабить корованы, конечно.

Но наверняка этот велосипед уже кто-то изобрёл, поэтому сначала надо дождаться второй части статьи.

[TimsTims]

вот она в состоянии "всплыло модальное окно"

Этого будет мало, окажется, что ещё надо эмулировать разный размер экрана, на разных версиях браузера, и при разных входящих данных, и что вообще вам надо научить скрипт понимать Js, и понимать его логику. На выходе у вас получится новый браузер.

[NikolasPushkin]

Спасибо за статью, эта проблема очень актуальна, по поводу редизайна — часто и густо в моей практике когда сайт переходит на новый дизайн постепенно и это постепенное обновление заставляет держать стили версии 1, версии 1.1, версии 1.2 и и.д. и нет этому конца у постоянно растущего сервиса.

[ru_vds]

Опубликовали 2 часть статьи.

[prishelec]

Удалял стили из css вручную. Из платных шаблонов (шаблоны добротные, но много лишнего). Дело очень противненькое. Подтолкнул меня на это анализ сайта от PageSpeed Insights. Тоже искал сервисы или ПО. И понял что будет только хуже. В итоге пришлось ковырять ручками. В итоге 40-60% кода убрал.