WEBduty.ru css html javascript jquery

5 способов оптимизации CSS

Статья от 23.07.09 в категории CSS
Теги: CSS, оптимизация

Некоторые из нас, возможно, помнят времена, когда 30KB были рекомендованным максимумом размера веб-страницы, включая HTML, CSS, Javascript и изображения. На данный момент у многих достаточно больших сайтов только CSS-стили имеют размер более 30KB.
Но существуют некоторые принципы, которые помогут оптимизировать ваш CSS код. Оптимизация не просто уменьшает размер файла, она делает ваши CSS-стили более организованными и эффективными. Использование оптимальных методов CSS неизбежно приведет к уменьшению размера CSS-файлов.

1. Используйте сокращенные формы

Используйте сокращенные формы таких свойств как margin, border, padding, background, font, list-style. Это самый простой способ оптимизации CSS-стилей. Если вы ещё не применяете этот метод – начните сегодня.
Сокращенная форма означает, что вместо использования различных деклараций для соответствующих свойств…

   p { margin-top: 10px;  
        margin-right: 20px;  
        margin-bottom:  30px;  
        margin-left: 40px; }

… вы используете их комбинацию:

   p { margin: 10px 20px 30px 40px; }

Правила, по которым браузеры интерпретируют сокращенную запись показаны на следующих иллюстрациях.

Аналогичные правила выполняются для padding и border-weight.
По следующим правилам можно сократить свойство font

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

2. Не используйте CSS-хаки

Вероятно, каждый человек, кто дочитал до этого пункта, хотя бы раз использовал CSS-хаки. Во многих случаях это достаточно удобно и эффективно. Но когда таких хаков становится несколько десятков, код становится очень “грязным” и менее понятным. В таких случаях удобнее использовать условные комментарии. Это общепринятая практика, рекомендуемая даже Microsoft (неудивительно, ведь в отношении их браузеров как правило используются хаки). Кроме того использование условных комментариев облегчит ваши CSS-файлы, т.к. современные браузеры не будут загружать хаки для отсталых.
Вот так можно подключить дополнительный файл ie6.css только в IE6:

 <!--[if IE 6]>  
     <link rel="stylesheet" type="text/css" href="ie6.css">  
 <![endif]-->

Вот несколько условных комментариев для IE:

<!--[if IE]> Инструкции для Internet Explorer <![endif]-->
<!--[if IE 5]> Инструкции для IE 5 <![endif]-->
<!--[if IE 5.0]> Инструкции для IE 5.0 <![endif]-->
<!--[if IE 5.5]> Инструкции для IE 5.5 <![endif]-->
<!--[if IE 6]> Инструкции для IE 6 <![endif]-->
<!--[if IE 7]> Инструкции для IE 7 <![endif]-->
<!--[if IE 8]> Инструкции для IE 8 <![endif]-->

В условных комментариях можно использовать операторы, с помощью которых можно задать более комплексное условие. В таблице ниже приведены все операторы.

И несколько примеров:

<!--[if ! IE 5]> Инструкции для  IE 5.5, 6 или 7 <![endif]-->
<!--[if gt IE 5.0]> Инструкции для IE 5.5, 6 или 7 <![endif]-->
<!--[if lte IE 5.5]> Инструкции для IE 5.0 или 5.5 <![endif]-->
<!--[if gte IE 6]> Инструкции для IE 6 или 7 <![endif]-->
<!--[if lt IE 7]> Инструкции для IE 5.0, 5.5 или 6 <![endif]-->
<!--[if lt IE 8]> Инструкции для IE до 8 <![endif]-->

Условные комментарии – хорошая альтернатива хакам. Помните, что меньше хаков – тем чище код.

3. Форматируйте ваш код

Правильное форматирование кода повысит его “читабельность” и ясность. Здесь существует два подхода: писать каждое CSS-свойство с новой строки..

p { margin-top: 10px;
     text-indent: 15px; }

..либо писать всё в одну строку, разделяя свойства пробелами:

p { margin-top: 10px; text-indent: 15px; }

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

4. Используйте CSS-библиотеки и Reset

О CSS-библиотеках я уже писал в своей статье. Суть здесь в том, что из проекта в проект вы, зачастую, пишите практически идентичные блоки кода, решая локальные задачи. Будь то стили для отображения текста, верстка многоколонного дизайна, и т.п. Чтобы не писать несколько раз то, что давно уже написано до вас ведущими специалистами в этой области, используют CSS-библиотеки.
Самыми распространенными из них считаются библиотеки для сброса стилей. Например YUI Grid CSS или Reset.css Эрика Маера. Они помогают нейтрализовать настройки браузера “по умолчанию”, как бы сбросить стили.
Стоит заметить, что сами CSS-библиотеки иногда могут нуждаться в оптимизации. Например, вы знаете что на вашем сайте о кулинарии никогда не будут использоваться теги pre и code, значит их стили можно убрать из используемых CSS-библиотек.
Используйте CSS-библиотеки только если они существенно сократят время разработки, иначе они превратятся в ненужный груз.

5. Сжимайте код

Существует несколько программ для сжатия CSS-файлов, например CSSTidy или YUI Compressor. Есть также и онлайн аналоги. Один из них вы можете использовать на моём сайте. Подобные программы сжимают CSS-стили, убирая из них лишние символы (пробелы, табуляции), преобразуют некоторые свойства в сокращенную форму и многое другое.
Некоторые специализированные текстовые редакторы умеют сжимать CSS-стили, например BBEdit, TextMate или TopStyle. Также можно сжимать файлы на стороне сервера с помощью PHP. В следующих статьях будет более полный список средств для сжатия и оптимизации CSS.

Заключение

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


В статье использованы материалы smashingmagazine.com

Подпишись на обновления

Если вам понравилась статья, подпишитесь на обновления через RSS (?), чтобы не пропустить новые интересные статьи. Также Вы можете зафолловить меня в Twitter или подписаться на обновления по email.

Закладки

Похожие статьи:

• 10 полезных CSS приёмов
• 8 простых способов улучшить типографию на вашем сайте
• Селекторы CSS. Часть первая.
• Делаем кнопку как в Skype с помощью jQuery
• Обзор CSS библиотек.