Оптимизация CSS кода

Автор: Семавин Антон
Добавлен: 28.02.2010 11:15

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

Начнем с малого:

1. Не нужно указывать еденицу измерения у нуля:

Пишите margin:0; вместо margin:0px;

2. Необязательно ставить ( ; ) в последнем свойстве:

Пишите: { margin-top: 10px; margin-right: 0 }

3. Сокращайте цвета:

- Если все шесть цифр одинаковы сокращаем: (#FFFFFF - #FFF)
- Если три пары цифр/букв одинаковые сокращаем: (#0066cc - #06c)

Сокращенные формы написания некоторых свойств

1. Margin

Было:

{
margin-top: 10px;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
}

Сокращенное написание: margin: top right bottom left;
Получаем: margin:10px 0 10px 0;

2. Padding

Тот же самый принцип, что и при написание свойства margin, но здесь мы пойдем дальше:

4 значения-padding:top right bottom left (верх право низ лево) padding:10px 0 10px 0;
3 значения-padding:top left-right bottom (верх право-лево низ) padding:10px 0 10px;
2 значения-padding:top-bottom left-right (верх-низ право-лево) padding:10px 0 ;
1 значения-padding:all sides (со всех сторон) padding:10px;

3. Border

Было:

{
border-width: 1px;
border-style: dashed;
background-color:#000;
}

Сокращенное написание: border: width style color;
Получаем: border:1px dashed #000;

4. Background

Было:

{
background-color: #FOO;
background-image: url(bg.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;
}

Сокращенное написание: background: color image repeat attachment position;
Получаем: background: #f00 url(bg.gif) no-repeat fixed 0 0;

5. List-style

Было:

{
list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif);
}

Сокращенное написание: list-style: type position image;
Получаем: list-style: circle inside url(bullet.gif);

6. Font

Было:

{
font-style: italic;
font-variant: small-caps;
font-weight: normal;
font-size: 12px;
line-height: 1.2em;
font-family: Verdana, Arial, sans-serif;
}

Сокращенное написание:

font: font-style, font-variant, font-weight, font-size, line-height, и font-family;

Получаем: font: italic small-caps normal 12px/1.2em Verdana,Arial,sans-serif;

----------------
Антон Семавин - руководитель проекта «Центр коммерческого дизайна». Обучающие материалы по основам разработки фирменного стиля, web-дизайна, статьи, уроки, книги и многое другое, Вы найдете по адресу http://commerce-design.com/

Добавить комментарий:

Ваш комментарий...

Введите сумму чисел с картинки:

* Комментарии, содержащие в себе рекламу будут удалены!