Оптимизация CSS

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

Помимо обязательного использования архивации при загрузке файлов (gzip) и удаления лишних символов для уменьшения объема файла (minifying), также следует обращать внимание и на основные принципы построения блоков кода, которые также помогут уменьшить объем исходного файла.

Далее вкратце перечислим особые приемы:
Использование сокращений для кодов цветовой гаммы

   1: node { background-color: rgb(255,255,255);

   2: /*превращаем в...*/

   3:  

   4: /*используем другой синтаксис записи цвета*/

   5: node { background-color: #ffffff;

   6:  

   7: /*используем 3-значное сокращение*/

   8: node { background-color: #fff;

   9:  

  10: /*используем декларацию для задания общего стиля фона, но не указываем других node параметров */

  11: background: { #fff; }

Тем самым при записи декларации для задания цвета фона элемента по сравнению с первой и последней записью мы добились почти вдвое меньшей длины записи.

Объединение повторяющихся свойств

Для примера мы имеем следующие декларации:

 

   1: .artcile p {

   2:     font-family: Georgia, serif;

   3:     font-weight: normal;

   4:     line-height: 12px;

   5:     font-size: 10px;

   6: }

   7:  

   8: p {

   9:     font-family: Georgia, serif;

  10:     font-weight: normal;

  11:     line-height: 12px;

  12:     font-size: 11px;

  13: }

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

   1: .artcile p {

   2:     font-size: 10px;

   3: }

   4:  

   5: p {

   6:     font-family: Georgia, serif;

   7:     font-weight: normal;

   8:     line-height: 12px;

   9:     font-size: 11px;

  10: }

Использование глобальный деклараций

Наиболее объемные записи в кодах css получаются, когда при задании свойств кодер обращается к отдельному свойству, а не задает сразу группу. Рассмотрим на примере:

   1: p {

   2:     font-family: Georgia, serif;

   3:     font-weight: normal;

   4:     line-height: 1.33em;

   5:     font-size: 1.33em;

   6: }

   7:  

   8: /* Можно превратить в следующую запись */

   9: p {

  10:     font-family: normal 1.33em/1.33 Georgia, serif;

  11: }

Тем самым, чтобы не задавать каждому свойсту значения в отдельности, можно задать сразу группе свойств одной записью. Как видно - экономия места налицо. Следущие свойства также можно объединять в группы.

   1: background-color: #fff;

   2: background-image: url(i/dope.png);

   3: background-repeat: repeat-x;

   4: background-position: 0 0;

   5:  

   6: /* 4 свойства заменяется 1 */

   7: background: #fff url(i/dope.png) repeat-x 0 0;

   8:  

   9: margin-top: 10px;

  10: margin-right: 20px;

  11: margin-bottom: 10px;

  12: margin-left: 20px;

  13:  

  14: /* можно записать как */

  15: margin: 10px 20px 10px 20px;

  16:  

  17: border-width: 1px;

  18: border-style: solid;

  19: border-color: red;

  20:  

  21: /* можно записать как */

  22: border: 1px solid red;

Объединение одинаковых числовых значений

   1: margin: 10px 20px 10px 20px;

   2: /*можно записать как*/

   3: margin: 10px 20px;

   4:  

   5: margin: 10px 10px 10px 10px;

   6: /*можно записать как*/

   7: margin: 10px;

Удаление 0 в дробных числах

   1: padding: 0.1em;

   2: margin: 10.0em;

   3:  

   4: /*Можно записать как*/

   5: padding: .1em;margin: 10em;

Удаление единиц измерения для нулевых значений

   1: padding: 0px;

   2:  

   3: /*Можно записать как*/

   4: padding: 0;

Удаление комментарией из продакшн-версий

Удаление ненужных пробелов

   1: body {

   2:     font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

   3:     background-color: #333;

   4:     text-align: center;

   5:     margin: 0px auto;

   6:     font-size: 62.5%;color: #FFF;

   7: }

   8:  

   9: /*Можно записать как*/

  10: body { ont-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; background-color: #333; text-align: center; margin: 0px auto; font-size: 62.5%; color: #FFF; }

Желательно использовать специальные программы для удаления ненужных пробелов и переносов строки уже при переносе файла на сервер. Процесс удаления называется minifying.