Оптимизация стилей CSS

Говоря простым языком, и не вникая в глубокие подробности web-программирования, можно сказать, что CSS стили это такие элементы сайта, которые отвечают за отображение различных элементов. То есть, CSS определяет то, что вы увидите на странице сайта. Иными словами, CSS – это как бы одёжка для web-страниц, внешний дизайн.

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

Оптимизация таблицы стилей сводится к тому, что уменьшается её размер. Соответственно, увеличивается скорость работы сайта. Уменьшить размер файла CSS можно несколькими способами: удалить закомментированные пустые строки, объединить части таблицы с одинаковыми свойствами и удалить отступы.

Все эти операции никак не повлияют на внешний вид дизайна сайта, если их проделать правильно. Для того чтобы оптимизировать CSS существует множество способов: десктопные программы, онлайн сервисы и даже плагины для Word Press. В этой статье мы поговорим о программе snap{css}.

Snap{css}

Для начала следует определить, какие именно CSS файлы нуждаются в оптимизации. В этом нам поможет Google со своим инструментом PageSpeed Insights. Здесь потребуется найти пункт «Сократите CSS» и нажать «Как исправить». И вы увидите список файлов CSS, который рекомендуется оптимизировать.

Чтобы получить эти файлы вам понадобится зайти на сайт через FTP и просто скачать их на свой компьютер. Как настроить FTP мы писали здесь. Затем перед редактированием было бы неплохо снять с файлов копии, а то вдруг что-то не получится.
Когда все файлы, нуждающиеся в оптимизации CSS, находятся на локальном компьютере, нужно открыть их. Но не через Notepad++, как мы привыкли, а через установленную уже программу snap{css}.

Для оптимизации следует просто нажать в этой программе пункт Collapse Code в меню Tools. И всё. Код CSS превратился в перемешанный коллапс, ужасный для человеческого глаза, но привлекательный для браузеров и поисковых машин.

Программа snap{css} не удаляет закомментированные строки, обозначенные */ и /*. Это предоставляется на усмотрение web-мастера. Придётся самому пробежаться по файлу глазами и удалить только те, которые не нужны. В принципе, это хорошо, что программа не удаляет их сама. А если вы не разбираетесь в CSS, то просто оставьте некомментированные строки. Они сильно не помешают.

Итак, как было сказано, код CSS обратился в коллапс. Теперь, если вам понадобится что-то в нём редактировать, вам придётся трудно, так как найти что-то в этом хаосе будет сложно. Поэтому в snap{css} есть замечательная функция Beautify Code в меню Tools. Если вы нажмёте на этот пункт, то код снова станет красивым и приятным для глаза. А после редактирований можно опять всё заколапсить.

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