Оптимизация CSS файла

25-08-2010

Размещено в рубрике: CSS

CSS В этой статье я затрону такое понятие как уменьшение размера css файла(ов) на вашем сайте. Без помощи сторонних программ и сервисов.

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

А вот если вы часто вносите изменения, дорабатывает или много работает с вашим файлом стилей. То постоянно после каждого мелкого изменения снова его сжимать, неудобно.

Вот мы и постараемся сделать наш css файл максимально маленьким и при этом сохранить его читабельность.

Поехали

Правило 1. Используйте группировку для подобных правил

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

#nad_raz
{
position: absolute;
font-size: 17px;
font-family: Verdana, Geneva, sans-serif;
color: #e6e9ec;
font-weight: 700;
top: 20px;
left: 30px;
}

#nad_dva
{
position: absolute;
font-size: 17px;
font-family: Verdana, Geneva, sans-serif;
color: #e6e9ec;
font-weight: 700;
top: 40px;
left: 30px;
}

#nad_tri
{
position: absolute;
font-size: 17px;
font-family: Verdana, Geneva, sans-serif;
color: #e6e9ec;
font-weight: 700;
top: 60px;
left: 30px;
}

А можно записать так:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

#nad_raz, #nad_dva, #nad_tri
{
position: absolute;
font-size: 17px;
font-family: Verdana, Geneva, sans-serif;
color: #e6e9ec;
font-weight: 700;
}

#nad_raz
{
top: 20px;
left: 30px;
}

#nad_dva
{
top: 40px;
left: 30px;
}

#nad_tri
{
top: 60px;
left: 30px;
}

Правило 2. Используйте сокращенный вид записи для параметров

В предыдущем примере мы использовали для шрифта три параметра:

font-size: 17px;
font-family: Verdana, Geneva, sans-serif;
font-weight: 700;

А можно записать так:

1
2
3

font:{
bold 17px Verdana, Geneva, sans-serif ;
}

Потом два самых часто встречаемых параметра: margin и padding

1 2	margin-left: 5px; margin-right: 2px; margin-top: 1px; margin-bottom: 6px padding -left: 5px; padding -right: 2px; padding -top: 1px; padding -bottom: 6px

А можно записать так:

1 2	margin: 1px 2px 6px 5px; padding: 1px 2px 6px 5px;

Где: 1. число – top
2. число – right
3. число –bottom
4. число – left

То есть все просто: «1» и «3» вниз вверх, а «2» и «4» вправо влево. Пару раз, записав, вы быстро привыкните.

Правило 3. Пишите параметры в одну строчку

1
2
3
4
5

#nad_raz
{
top: 20px;
left: 30px;
}

А можно записать так:

1	#nad_raz{top: 20px; left: 30px;}

Предупреждение: Для тех, кто только начал осваивать css это вредный совет, так как внесет много путаницы в дело, которое и так не совсем понятное.

А вот для тех, кто уже пообедал собакой, проблем это не принесет, а размер уменьшиться

Правило 4. Пишите значения параметров без пробела

1	#nad_raz{top: 20px; left: 30px;}

А можно так

1	#nad_raz{top:20px; left:30px;}

Только есть один нюанс:

«background:url (images/hdr-1.png) no-repeat» — в этой записи перед словом «no-repeat» пробел оставляйте так как Internet Explorer вас не поймет, а другие понимают.

Правило 5. После последнего параметра точку с запятой можно не ставить

1	#nad_raz{top: 20px; left: 30px;}

А можно записать так:

1	#nad_raz{top: 20px; left: 30px}

Экономия в один символ после каждого параметра.

Правило 6. Для значения 0 единицы измерения можно не указывать

1	margin {0px 0px 0px 6px}

А можно записать так:

1	margin {0 0 0 6px}

Ноль и в Африке ноль!

Правило 7. Не используйте слишком больших комментариев

Пометки конечно удобны, особенно когда берешься за код через месяц другой, но не стоит усердствовать.

И писать «Войну и мир» в вашем css файле он от этого значительно пухнет.

Если вы используете «CMS» для вашего сайта, то обязательно будете использовать и плагины. Так вот заглядываете в css файлы этих плагинов, там как раз часто и можно встреть мемуары разработчиков.

Из-за чего файл в шесть коротких параметров занимает 1-2 килобайта.

На этом закончу. Используя такие нехитрые правила, вы сможете добиться неплохой экономии в размере css файла, при этом оставив ему читабельный вид.

Для скептиков: типа, зачем ради экономии в 5-10 кб мучиться. Но при сложном сайте или при использовании «CMS» с огромным количеством файлов вступает закон больших чисел.

И при 100 файлах 5 кб превратятся в пол мегабайта.

С уважением Тригуба Сергей!

Нравится

Приглашаю присоединиться ко мне в следующих сервисах:

Присоединится ко мне в twitter

Присоединится ко мне в Вконктакте

Присоединится ко мне в Facebook

Присоединится ко мне в Google plus

Мои групы:

Группа webmasterprof.ru в Facebook

Группа webmasterprof.ru в Вконтакте

Получайте новые статьи по созданию сайтов на ваш почтовый ящик.