Отладка и оптимизация CSS: Минимизация с помощью CSSO

Отладка и оптимизация CSS: Минимизация с помощью CSSO

От автора: на пути к тому, чтобы стать мастером CSS, вам нужно знать, как отлаживать и оптимизировать CSS. Как вы диагностируете и устраняете проблемы с рендерингом? Как вы обеспечиваете, чтобы CSS не вызывал проблем с производительностью для конечных пользователей? И как вы обеспечиваете качество кода?

Знание того, какие инструменты использовать, поможет вам обеспечить, чтобы front-end работал оптимально. В этой статье мы рассмотрим минимизацию CSS.

Инструменты разработчика помогают найти и устранить проблемы с рендерингом, но как насчет эффективности? Размеры файлов у нас настолько малы, насколько это возможно? Для этого нам нужны инструменты для минимизации.

Минимизация в контексте CSS просто означает «удаление лишних символов». Рассмотрим, например, этот блок кода:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Это 98 байт, включая разрывы строк и пробелы. Давайте рассмотрим другой пример:

Теперь наш 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. В командной строке введите:

Флаг -g устанавливает CSSO глобально, поэтому мы можем использовать его из командной строки. При завершении установки npm выведет в окно терминала сообщение.

Установка CSSO с помощью npm на macOS

Теперь мы готовы минимизировать наш CSS.

Минимизация с помощью CSSO

Чтобы минимизировать файлы CSS, запустите команду csso, передав имя файла в качестве аргумента:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Это запустит базовое сжатие. CSSO удаляет ненужные пробелы, лишние точки с запятой и комментарии из входного файла CSS.

После завершения CSSO выведет оптимизированный CSS в стандартном формате, что означает текущий терминал или окно командной строки. Однако в большинстве случаев мы хотим сохранить этот вывод в файле. Для этого передайте csso второй аргумент — имя минимизированного файла. Например, если бы мы хотели сохранить мини-версию style.css как style.min.css, мы использовали бы следующее:

По умолчанию CSSO изменит части вашего CSS. Например, объединит объявления с дублируемыми селекторами и удалит некоторые переопределенные свойства. Рассмотрим следующий CSS:

В этом фрагменте margin-left переопределяет раннее объявление. Мы также повторили h1 как селектор для последовательных блоков объявления. После оптимизации и минимизации мы получим следующее:

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 дает нам следующее:

Теперь наш CSS минимизирован, но не оптимизирован. Отключение реструктуризации приведет к тому, что файлы CSS не будут настолько малыми, какими они могут быть. Избегайте отключения реструктуризации, если у вас не возникает конкретных проблем.

Препроцессоры и постпроцессоры (такие как Sass, Less и PostCSS) предлагают минимизацию как часть своего набора инструментов. Однако использование CSSO может сэкономить дополнительные байты.

Автор: Tiffany Brown

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree