Когда я пишу сайты я пользуюсь CSS SCSS(SASS) – мне больше нравится синтаксис SCSS. Потом естественно при записи Gulp отслеживает изменения *.scss файлов и генерирует CSS. Конечно при генерации я делаю циклы и миксины, чтобы было всё удобное под рукой. Отсюда и минус – в одном проекте классы нужны, в другом нет, а пишу я универсальные, чтобы использовать повторно. И даже в рамках одного проекта бывает что пока подбираешь верстку используешь то одни классы, то другие, но все они генерируются по одному алгоритму.
Когда же я выкладываю сайт на хостинг из сгенерированного CSS и framework’ов нужны далеко не все стили. Значит если не чистить CSS это в 5-6 а может и 10 раза больший код, чем нужен и это дополнительное время загрузки страниц.
Тогда я взял purify-css и все бы хорошо если бы классы все назывались по-разному, но когда есть классы w-70vw (width: 70vw) и подобные ему от 0 до 100 vw purify-css буксует и не удаляет классы, если находит использование хотя бы одного из подмножества классов, например, если находит в html файле использование класса w-70vw, то оставит все классы w-0vw – w-100vw, даже если они не используются нигде.
Поэтому мне не подходит purify-css и я не могу рекомендовать его для проектов.
Каков же выход? Включить в свой проект uncss
gulp-uncss – он корректно обрабатывает подмножества классов и не оставляет не используемых классов. Да, похоже он не умеет искать ссылки на классы в JS, но можно и самому написать или добавить классы в исключения. Да маски он конечно же тоже поддерживает.
На оф. сайте рекомендуют использовать вместо gulp-uncss – uncss т.к. проект устарел. Не знаю так ли это, но на момент написания поста я поставил себе gulp-uncss и он замечательным образом из css в 29,4кб сделал мне CSS 6,23кб и это без минификации! (написания CSS в одну строку без лишних пробелов, комментариев и переводов строки).
+ Нет комментариев
Добавить свой