Как убрать не нужный css из сайта?

Question

[Вазген Алексанян]

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

Answer 1

[WapSter]

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

Comments

[Вазген Алексанян]

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

[WapSter]

Вазген Алексанян, https://www.keycdn.com/blog/remove-unused-css немного облегчит задачу)

[Kovalsky]

Почему не решена? Uncss и альтернативы существуют с 2013-го

[Ankhena]

Kovalsky, и как эти альтернативы узнают о классах добавленных когда-нибудь потом через js?

[Kovalsky]

Ankhena, оп сказал что у него есть три больших файла, значит речь о статике, а не о динамике.

Стоп, о классах? Мы же вроде бы не о классах говорим, а об удалении неиспользуемых правил

[Ankhena]

Kovalsky, но это же не значит, что нет js и прилетающих по дороге стилей, например, при открытии бургера или на разных размерах окна или добавлении товара в корзину и кучи других вариантов действий. А ТС вообще об этом может не знать.
Поэтому, эта проблема нормально не решена ;)

[Kovalsky]

Ankhena, "например, при открытии бургера или на разных размерах окна или добавлении товара в корзину и кучи других вариантов действий" - вот это всё я не понял. Что значит прилетающих по дороге? Речь о прямой модификации styleSheet или создании новых?

Убирать правила из медиа кстати uncss умеет

[Ankhena]

Kovalsky, я про media вообще ничего не говорила

[WapSter]

Kovalsky, динамически добавляющихся из js при определенных условиях. которые вообще сработают еще из каких нибудь условий. В общем эта проблема не решена

[Kovalsky]

WapSter, динамически добавляющиеся стили тоже можно модифицировать при сборке, и даже в случае с css-in-js.

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

"прилетающих по дороге стилей, например, при открытии бургера или на разных размерах окна или добавлении товара в корзину и кучи других вариантов действий" - вот это кстати я до сих пор не понял

[WapSter]

Kovalsky, вот тебе пример https://codepen.io/wapster92/pen/eYNjrQx в стилях есть класс с рабочими правилами. uncss не найдет этот элемент в html и запорит его, но он рабочий и даже нужный. И про сами правила добавленные из js тебе ничего не говорят. А именно про манипуляции с селeктором на стороне js, когда правила для "несуществующего" селектора прописаны в стилях (style.css или еще где-то там)

[Kovalsky]

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

[WapSter]

Kovalsky, ок удачи в подготовки таких страниц в легаси проекте)

[Kovalsky]

WapSter, ну старый проект в котором нету тестов и "эта проблема не решена" это ведь разные вещи. Так-то разработку всегда можно запороть независимо от того легаси проект или нет

Answer 2

[IDONTSUDO]

Может это поможет https://habr.com/post/477274/

Answer 3

[Kovalsky]

uncss

Answer 4

[Вазген Алексанян]

Спасибо всем. Ну там на самом деле не три файла а много. так что решили дать на верстку этой страницы только. потратим деньги но это походу самый верный способ