Как уменьшить размер CSS файла? Оптимизация CSS кода.

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


Общие рекомендации для оптимизации CSS кода.

1. Используйте свободное место только тогда, когда это действительно вам необходимо.
2. Используйте способы сокращения СSS.
3. Не ставьте точку с запятой после последего свойства каждого стиля
4. Используйте "700" вместо "полужирный" (например "font-weight:700;" вместо "font-weight: bold;")
5. Используйте "400" вместо "нормальный"
6. Используйте 0 вместо 0px
7. Объединяйте стили с одинаковыми свойствами.

Выбирайте тот способ оптимизации, который вам подходит, но не забывайте и о стандартах!

1.Удаляем точку с запятой

Пример стандартного CSS кода

html {margin: 0;padding: 0;}body { font: 75% georgia, sans-serif;line-height: 1.88889;color: #555753; background: #fff url(/001/blossoms.jpg) no-repeat bottom right; margin: 0; padding: 0;}p { margin-top: 0; text-align: justify;}h3 { font: italic normal 1.4em georgia, sans-serif;letter-spacing: 1px; margin-bottom: 0; color: #7D775C;}a:link { font-weight: bold; text-decoration: none; color: #B7A5DF;}

Размер приведенного файла 3.39 Кб. Это много.

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

Получаем

 html {        margin:0;        padding:0        }                body {        background:#fff url(/001/blossoms.jpg) no-repeat bottom right;        color:#555753;        font:75% georgia, sans-serif;        line-height:1.88889;        margin:0;        padding:0        }                p {        margin-top:0;        text-align:justify        }                h3 {        color:#7D775C;        font:italic normal 1.4em georgia, sans-serif;        letter-spacing:1px;        margin-bottom:0        }                a:link {        color:#B7A5DF;        font-weight:bold;        text-decoration:none      }

Размер файла после первого шага уже 3.02 Кб, а это значит, что файл загрузится быстрее.

2. Каждый стиль пишем в одну строку.

html{margin:0;padding:0}      body{background:#fff url(/001/blossoms.jpg) no-repeat bottom right;color:#555753;      font:75% georgia, sans-serif;line-height:1.88889;margin:0;padding:0}      p{margin-top:0;text-align:justify}      h3{color:#7D775C;font:italic normal 1.4em georgia, sans-serif;letter-spacing:1px;      margin-bottom:0}      a:link{color:#B7A5DF;font-weight:bold;text-decoration:none}

Теперь размер файла стал 2.57 Кб. т.е. меньше первоначального на 25%, однако код стало не так комфортно читать.

3. Весь файл CSS пишем в одну строку.

html{margin:0;padding:0}body{background:#fff url(/001/blossoms.jpg) no-repeat...

Получаем файл 2.53 KB.