От автора: на пути к тому, чтобы стать мастером CSS, вам нужно знать, как отлаживать и оптимизировать CSS. Как вы диагностируете и устраняете проблемы с рендерингом? Как вы обеспечиваете, чтобы CSS не вызывал проблем с производительностью для конечных пользователей? И как вы обеспечиваете качество кода?
Знание того, какие инструменты использовать, поможет вам обеспечить, чтобы front-end работал оптимально. В этой статье мы рассмотрим минимизацию CSS.
Инструменты разработчика помогают найти и устранить проблемы с рендерингом, но как насчет эффективности? Размеры файлов у нас настолько малы, насколько это возможно? Для этого нам нужны инструменты для минимизации.
Минимизация в контексте CSS просто означает «удаление лишних символов». Рассмотрим, например, этот блок кода:
h1 { font: 16px / 1.5 'Helvetica Neue', arial, sans-serif; width: 80%; margin: 10px auto 0px;
}
Это 98 байт, включая разрывы строк и пробелы. Давайте рассмотрим другой пример:
h1{font:16px/1.5 'Helvetica Neue',arial,sans-serif;width:80%;margin:10px auto 0}
Теперь наш CSS составляет всего лишь 80 байт — сокращение на 18%. Меньше байт, конечно, означает более быстрое время загрузки и экономию на передаче данных для вас и ваших пользователей.
В этой статье мы рассмотрим CSS Optimizer или CSSO, средство минимизации, которое работает на Node.js. Чтобы установить CSSO, вам сначала нужно установить Node.js и npm. npm устанавливается как часть процесса установки Node.js, поэтому вам нужно будет установить только один пакет.
Использование CSSO позволяет работать из удобного интерфейса командной строки. Пользователи Linux и macOS могут использовать приложение Terminal (Приложения> Terminal.app для macOS). Если вы работаете под Windows, используйте командную строку. Перейдите в меню «Пуск» или «Windows» и введите cmd в поле поиска.
Установка CSSO
После установки Node.js и npm, вы можете установить CSSO. В командной строке введите:
npm install -g csso
Флаг -g устанавливает CSSO глобально, поэтому мы можем использовать его из командной строки. При завершении установки npm выведет в окно терминала сообщение.
Установка CSSO с помощью npm на macOS
Теперь мы готовы минимизировать наш CSS.
Минимизация с помощью CSSO
Чтобы минимизировать файлы CSS, запустите команду csso, передав имя файла в качестве аргумента:
csso style.css
Это запустит базовое сжатие. CSSO удаляет ненужные пробелы, лишние точки с запятой и комментарии из входного файла CSS.
После завершения CSSO выведет оптимизированный CSS в стандартном формате, что означает текущий терминал или окно командной строки. Однако в большинстве случаев мы хотим сохранить этот вывод в файле. Для этого передайте csso второй аргумент — имя минимизированного файла. Например, если бы мы хотели сохранить мини-версию style.css как style.min.css, мы использовали бы следующее:
csso style.css style.min.css
По умолчанию CSSO изменит части вашего CSS. Например, объединит объявления с дублируемыми селекторами и удалит некоторые переопределенные свойства. Рассмотрим следующий CSS:
body { margin: 20px 30px; padding: 100px; margin-left: 0px;
}
h1 { font: 200 36px / 1.5 sans-serif;
}
h1 { color: #ff6600;
}
В этом фрагменте margin-left переопределяет раннее объявление. Мы также повторили h1 как селектор для последовательных блоков объявления. После оптимизации и минимизации мы получим следующее:
body{padding:100px;margin:20px 30px 20px 0}h1{font:200 36px/1.5 sans-serif;color:#f60}
CSSO удалил ненужные пробелы, разрывы строк и точки с запятой и сократил #ff6600 до #f60. CSSO также объединил свойства margin и margin-left в одно объявление (margin: 20px 30px 20px 0) и свел отдельные блоки селектора h1 в один.
Если вы скептически относитесь к тому, как CSSO перепишет ваш CSS, вы можете отключить функции реструктуризации. Просто используйте флаги —restructure-off или -off. Например, запуск csso style.css style.min.css -off дает нам следующее:
body{margin:20px 30px;padding:100px;margin-left:0}h1{font:200 36px/1.5 sans-serif}h1{color:#f60}
Теперь наш CSS минимизирован, но не оптимизирован. Отключение реструктуризации приведет к тому, что файлы CSS не будут настолько малыми, какими они могут быть. Избегайте отключения реструктуризации, если у вас не возникает конкретных проблем.
Препроцессоры и постпроцессоры (такие как Sass, Less и PostCSS) предлагают минимизацию как часть своего набора инструментов. Однако использование CSSO может сэкономить дополнительные байты.
Автор: Tiffany Brown
Источник: https://www.sitepoint.com/
Редакция: Команда webformyself.
