Ниже приводится выдержка из нашей книги CSS Master , написанной Тиффани Браун. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .
Инструменты разработчика помогают находить и устранять проблемы с рендерингом, но как насчет эффективности: наши размеры файлов настолько малы, насколько они могут быть? Для этого нам нужны инструменты минификации .
Минификация в контексте 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 и OS X могут использовать приложение Terminal (Приложения> Terminal.app для OS X). Если вы используете Windows, используйте командную строку. Перейдите в меню «Пуск» или «Windows» и введите cmd в поле поиска.
Установка CSSO
После того как вы настроили Node.js и NPM, вы можете установить CSSO. В командной строке введите:
npm установить -g csso
Флаг -g устанавливает CSSO глобально, чтобы мы могли использовать его из командной строки. Пользователям OS X и Linux может понадобиться использовать sudo ( sudo npm install -g csso ). Вы узнаете, что он установлен, когда NPM напечатает его путь установки в окне командной строки, и приглашение командной строки появится снова, как показано на рисунке 3.25.
Рисунок 3.25. Установка CSSO с помощью командной строки Windows
Теперь мы готовы минимизировать наш 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:
тело {
поле: 20px 30px;
отступы: 100px;
поле слева: 0px;
}
h1 {
шрифт: 200 36px / 1.5 без засечек;
}
h1 {
цвет: # 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; отступ: 100px; margin-left: 0} h1 {font: 200 36px / â1,5 без засечек} h1 {цвет: # f60}
Теперь наш CSS минимизирован, но не оптимизирован. Отключение реструктуризации не даст вашим CSS-файлам стать такими маленькими, какими они могли бы быть. Избегайте отключения реструктуризации, если не столкнетесь с проблемами.
Препроцессоры, представленные в главе 9, предлагают минимизацию как часть своего набора инструментов; однако, использование CSSO может сократить дополнительные байты от ваших размеров файлов.