Tweet В этой статье я затрону такое понятие как уменьшение размера 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} |
А можно записать так:
Ноль и в Африке ноль!
Правило 7. Не используйте слишком больших комментариев
Пометки конечно удобны, особенно когда берешься за код через месяц другой, но не стоит усердствовать. И писать «Войну и мир» в вашем css файле он от этого значительно пухнет. Если вы используете «CMS» для вашего сайта, то обязательно будете использовать и плагины.
.jpg)
Так вот заглядываете в css файлы этих плагинов, там как раз часто и можно встреть мемуары разработчиков. Из-за чего файл в шесть коротких параметров занимает 1-2 килобайта. На этом закончу. Используя такие нехитрые правила, вы сможете добиться неплохой экономии в размере css файла, при этом оставив ему читабельный вид. Для скептиков: типа, зачем ради экономии в 5-10 кб мучиться. Но при сложном сайте или при использовании «CMS» с огромным количеством файлов вступает закон больших чисел. И при 100 файлах 5 кб превратятся в пол мегабайта. С уважением Тригуба Сергей! Спасибо Вам, что добавили эту статью в: Добавить в Twitter Добавить в Вконтакт Добавить в Facebook Добавить в Google buzz Добавить в Мой мир Опубликовать в своем блоге livejournal. com Приглашаю присоединиться ко мне в следующих сервисах: Присоединится ко мне в twitter Присоединится ко мне в Вконктакте Присоединится ко мне в Facebook Присоединится ко мне в Google buzz Присоединится ко мне в friendfeed Мои групы: Группа webmasterprof. ru в Facebook Группа webmasterprof. ru в Вконтакте Будь в курсе! Подпишись на обновления блога через: RSS RSS Email Email
Понравилась статья? Получай обновления и будь всегда в курсе событий!