Как сжать, оптимизировать, уменьшить CSS-стили?

Как сжать css-стили?

Оптимизация или сжатие css-стилей ускорит загрузку страницы сайта, ускорит выполнение синтаксического анализа и уменьшит объем передаваемых данных. При этом сайт ни капли не потеряет в своей красоте, потому что сжатие css-стилей проходит без вреда для работоспособности его кода. Для этих целей я предлагаю Вам использовать специальный онлайн-инструмент, размещенный на следующей странице

//www.cssdrive.com/index.php/main/csscompressor/

который сможет адекватным образом сжать Ваш CSS-файл.

 Как происходит сжатие CSS?

Сжатие CSS-стилей происходит путем использования нескольких доступных действий:

1. Удаление пустых строк.
2. Удаление лишних пробелов.
3. Удаление отступов.
4. Удаление комментариев.
5. Использование сжатых цветовых кодов там, где это возможно.
6. Удаление ненужных символов.

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

Как оптимизировать css?

Интерфейс приведенного мною сайта для сжатие CSS-файлов весьма прост:

В первом пункте Вам необходимо выбрать степень сжатия стиля. Я предлагаю выбирать степень сжатия Normal, потому что она обеспечивает баланс между сжатием и работоспособностью кода. Использование же уровня сжатия Super Compact может привести к ошибкам в коде.

Второй пункт предназначен для удаления комментариев. На главную форму выведено именно эта настройка потому, что комментарии могут понадобиться веб-мастеру в будущем. Поэтому стирать их под ноль без предупреждения — плохая идея. Первый checkbox в данном пункте не будет стирать комментарии, второй — сотрёт все комментарии. А вот третий пункт будет удалять комментарии, длина которых не менее выбранного Вами значения.

Так же Вы всегда можете перейти в Расширенный режим сжатия CSS-стилей и выбрать только те пути сжатия, которые Вам нужны.

Нажатием кнопки Compress-it Вы запустите сжатие css-файла и получите долгожданный результат в виде оптимизированного файла стилей. Теперь остается только заменить содержимое оригинального css-файла оптимизированным кодом.