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

как оптимизировать CSS код

Чаще всего, несоблюдение требований при написании кода приводят к двум последствиям:

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

Избавиться от обоих недугов очень просто, достаточно соблюдать некоторые правила, вот они:

1. Не используйте глобальный сброс.

Использование глобального сброса стандартный margin’ов и padding’ов для всех HTML элементов совершенно недопустимо. И дело не только в том, что это медленно и неэффективно, но такой ход вынудит вас определять самому margin’ы и padding’и для всех элементов, которые в этом нуждаются. Вместо этого лучше используйте набор CSS ресетов для отдельных элементов и групп.

Плохо

*{ margin:0; padding:0; }

Лучше

html, body, div, ul,
h1, h2, h3,  pre, form, label, input, p,
blockquote, th, td { margin:0; padding:0 }
img { border:0 }
ul { list-style:none }

2. Не используйте хаки для IE

С помощью CSS хаков можно добиться правильного отображения сайта в старых браузерах, таких как IE6, но они же могут вызвать проблемы с более новыми версиями IE, например IE8, который довольно неплохо поддерживает стандарты CSS и использование хаков может привести к порче макета. Следует использовать условные операторы для определенных версий Internet Explorer.

Например, следующий код, если его разместить в теге <head> заставит iestyles.css загружаться только для Internet Explorer версий 6 и меньше.

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

Об условных комментариях можно почитать подробнее в статье на quirksmode — CSS Conditional Comments (на английском)

3. Используйте значимые имена для Классов и ID

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

4. Используйте наследование правил CSS

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

Плохо

#sidebar li{ font-family:"Lucida Grande", serif; }
#sidebar a{ font-family:"Lucida Grande", serif; }
#sidebar h3{font-family:"Lucida Grande", serif; }

Лучше

#sidebar{ font-family:"Lucida Grande", serif; }

5. Объединяйте несколько селекторов

Вы можете объединять CSS селекторы в одном правиле если у них одинаковые свойства. Это сохранит вам и время и размер файла.

Плохо

h1{ font-family: "Lucida Grande"; }
h2{ font-family: "Lucida Grande"; }
h3{ font-family: "Lucida Grande"; }

Лучше

h1, h2, h3{ font-family: "Lucida Grande"; }

6. Используйте сокращенную запись

Возможность использования сокращенной записи поможет быстро писать CSS код и уменьшит размер файла. Сокращенная запись доступна для свойств margin, padding, border, font, background, а также для значений цвета.

Плохо

li{
    font-family:"Lucida Grande", sans-serif;
    font-size: 1.3em;
    line-height: 1.5em;
    padding-top:3px;
    padding-bottom:8px;
    padding-left:7px;
}

Лучше

li{
    font: 1.3em/1.5em "Lucida Grande", sans-serif;
    padding:3px 0 8px 7px;
}

7. Организуйте CSS код

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

Вот пример организации кода:

/*-------------------------
    CSS Reset
-------------------------*/
 
/*-------------------------
    Layout styles
-------------------------*/
 
/*-------------------------
    Typography
-------------------------*/
 
/*-------------------------
    Section specific styles
-------------------------*/

8. Делайте CSS читаемым

Написание читаемого CSS облегчит поиск и редактирование стилевых правил. Можно группировать стили селектора в одну строку или выделять для селектора отдельную строку. Конечно можно и комбинировать эти техники.

/*------------------------
    Стили с переносом на новую строку
    ---------------------*/
div{
    background-color:#339acc;   
    color:#6a6;
    font: 1.3em/1.5em "Lucida Grande", sans-serif;
    height:288px;
    margin:10px 5px;
    padding:3px 0 8px 7px;
    width:29%;
    z-index:9;
}
 
/*------------------------
    Все стили в одну строку
    ---------------------*/
div{ background-color:#339acc; color:#6a6; font: 1.3em/1.5em "Lucida Grande", sans-serif;  height:288px; margin:10px 5px; padding:3px 0 8px 7px; width:29%; z-index:9; }

9. Добавляйте комментарии

Комментарии можно использовать для разделения секций CSS кода

/*--------------------
    Шапка
    -----------------*/
#header{ height:138px; position:relative; }
#header h1{ width:328px; margin:45px 0 0 20px; float:left;  height:69px;}
 
/*--------------------
    Контент
    -----------------*/
#content{ background:#faf; width:632px; float:left; min-height:588px; overflow:hidden;}
#content .posts{ overflow:hidden; }
 
/*--------------------
    Подвал
    -----------------*/
#footer{ clear:both; padding:32px 6px 0; overflow:hidden;}
#footer h4{ color:#b93d7f; font-family:"Lucida Grande", sans-serif; font-size:1.2em; }

10. Сортируйте CSS свойства по алфавиту

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

div{
    background-color:#339acc;   
    color:    #6a6;
    font:     1.3em/1.5em "Lucida Grande", sans-serif;
    height:    288px;
    margin:    10px 5px;
    padding:3px 0 8px 7px;
    width:    29%;
    z-index:9;
}

11. Используйте внешние таблицы стилей

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

Плохо

<style type="text/css" >
    #objekt1{ .. }
    #objekt2{ .. }
</style>
 
OR
 
<li style="font-family:"Lucida Grande", sans-serif; color:#666; " >

Лучше

<link rel="stylesheet" type="text/css" href="css/styles.css" />

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

После того как ваш код будет готов к эксплуатации, его необходимо сжать, например, с помощью cy-pr.com/tools/css/, так вы уменьшите время загрузки сайта, за счет уменьшения размера файла.

Заключение

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