SJ

18 Методов и инструментов cжатия CSS

Чтобы научится писать чистый, оптимизированный CSS, требуется много практики и непреодолимая маниакальная аккуратность. Поддержание вашего CSS упроядоченным и опрятным, не только для поддержания вашей безумной психологической потребности в чистоте, в случае особо крупных веб-сайтов будет выигрыш в более быстрой загрузки страниц. Более быстрая загрузка повышает удобство,а так же степень удовлетворенности пользователей.

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

Сжимать или не сжимать

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

Может потребоватся некоторое время, чтобы найти идеальное сочетание между сжатием и читабельностью. Многие методы, которые можно использовать для сжатия кода приведет к лучшему, более организованному коду.

Имея это ввиду, давайте пройдемся по нескольким методам сохранения минимального размера CSS файла.

Пустые блоки стилей

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

Shorthand

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

Длинная версия:

#container {

padding-top: 5px

padding-right: 10px

padding-bottom: 30px

padding-left: 18px

}

Сокращенная:

#container {

padding: 5px 10px 30px 18px;

}

Дополнительные приемы по сокращению CSS, посетите статью.

CSS Sprites

Основная идея CSS sprites – уменьшение количества HTTP запросов для ускорения загрузки страницы. Несколько изображений объединяются в одно, обычно в виде таблицы. Каждое отдельное изображение отображается командой backgroundposition с указанием смещения, относительно большего изображения. Для более подробное рассмотрения этого вопроса, ознакомтесь с учебником Криса Койира:

Сокращение комментариев

Я люблю писать код с комментариями. Чем больше комментариев я пишу, тем быстрее я могу визуально отсортировать разные секции кода. Тем не менее, если вы стремитесь к высокооптимизранному CSS c небольшим объемом, чрезмерные комментарии могу съесть драгоценные килобайты. Попробуйте удалить ненужные комментарии и уменьшить в размере оставшиеся.

Использование шрифтов

Когда размер файла — большая проблема, не указывайте много альтернатив для font-families. Удалите все излишки.

До:

#container {font-family: Palatino, Georgia, Times, serif;}

После:

#container {font-family: Palatino, serif;}

Использовать шестнадцатеричные цвета

Чтобы сократить количество символов, конвертируйте RGB значения в их шестнадцатеричные эквиваленты. Это может показаться тривиальными, но каждый символ на счету!

До:

#container {color: rgb(131, 100, 219);}

После:

#container {color: #8364DB;}

Удаление переносов строк

Пройдитесь по каждому стилевому блоку и удалите ненужные переводы строк. Вы так же можете удалить последнию точку с запятой.

До:

#container {

margin: 5px;

padding: 5px 10px 30px 18px;

}

После:

#container {margin: 5px; padding: 5px 10px 30px 18px}

10 онлайн CSS компрессоров

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

CSS Drive

Опции:

    • Уровень сжатия: легкий, средний или супер компактный
    • Удаление комментариев: нет, все, или превышающие заданну длину

CSS Compressor

Опции (Выбор для каждой: Да или Нет):

  • Сортировка свойств
  • Сжатие цветов
  • Сжатие плотности шрифта
  • Селекторы в нижнй регистр
  • Удалить ненужные слэши
  • Удалить ненужные точки с запятой

Arantius

Опции (Выбор для каждой: Да или Нет):

  • Удалить комментарии
  • Удалить комментарии, по крайней мере, длиной Х символов
  • Одно правило на строку

CSS Optimizer

Опции:

  • Не удалять переводы строк (Да или Нет)
  • Получение CSS по URL, загрузке файла, или вставки текста

Lottery Post

Опции: нет

Clean CSS

Опции (Выбор для каждой: Да или Нет):

  • Сортировка селекторов
  • Сортировка свойств
  • Оптимизация селекторов и их свойств (0, 1 или 2)
  • Объединения свойств
  • Только безопастные оптимизации
  • Сжатие цветов
  • Сжатие плотности шрифта
  • Селекторы в нижний регистр
  • Регистр свойств (нижния или верхний)
  • Удаление ненужных обратных слэшей
  • Конвертировать !important хак
  • Удалить последний ;
  • Сохранить комментарии
  • Отбросить неверные свойства (CSS2.1, CSS2.0 или CSS1.0)

Pingates

Опции (Выбор для каждой: Да или Нет):

  • Конвертировать имена цветов в шестнадцатеричный код
  • Коневертировать длинные шестнадцатеричные коды в короткие
  • Конвертировать длинные шестнадцатеричные коды в имена цветов
  • Конвертировать RGB в шестнадцатеричный цвет
  • Комбинировать идентичные правила
  • Комбинировать идентичные селекторы
  • Комбинировать идентичные свойства
  • Удалить переписанные свойства
  • Удаление бесполезных значений из margins и padding
  • Показать статистику
  • Результат в цвете
  • Результат в минимальном размере

PHP Insider

Опции: нет

SevenForty

Опции:

  • Удаление переводов строк

Page Column

Опции: нет

GZIP

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

Заключение

Как я уже говорил ранее, многие из этих методов могут показаться чрезмерными и бессмысленными. Весь фокус в том, чтобы взглянуть на картину в целом. Хотя любой из этих советов может иметь почти незначительный эффект, сочетание нескольких или всех методов могут сильно повлять на размер файла CSS.

via designhack.co.uk