Сегодня мы поговорим об оптимизации не сайта, а CSS стилей, как это? Терпение сейчас объясним. Оптимизация CSS стилей заключается в уменьшении размера, файла, а также в упорядочивании кода и его организации. Ведь только недавно, максимальный размер страницы весил всего – лишь 30 кб, а сейчас эти 30 кб, а то и больше, весит только CSS файл.

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

Как провести оптимизацию? Вы просто входите на свой хостинг и находите все файлы, которые после точки имеют надпись CSS, то есть примерно так: papka.css, index.css, page.css. Открываете их  и просматриваете, выявляя некоторые характеристики, какие именно мы сейчас вам расскажем.

Существует несколько способов правильной оптимизации CSS стилей:

Первый, способ оптимизации CSS стиля, это сокращение форм – одна из характеристик. Вы можете сокращать формы таких свойств как:  background, font, margin, list-style, padding, border. Это один из самых простых и применяемых методов оптимизации. То есть вместо полной формы, вы будете использовать их декларации.

Свойство margin…

p {

margin-top: 20px;

margin-right: 30px;

margin-bottom:  40px;

margin-left: 50px;

}

а вот и сокращенная форма…

p { margin: 20px 30px 40px 50px; }  –  которая очень оптимальная, выгодна и мало занимающая.

Точно так же оптимизируем свойство font…

Его исходный код, найденный в стилях, мы заменяем на следующий и очень сильно сокращаем форму:

p { font: normal small-caps bold 110%/1.3 serif; }

Вот видите, это всего – лишь два примера, а мы уже на много сократили наш код, что же будет если применить оптимизацию на всех свойствах стиля?

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

1.       Они обычно делают код сложнее в поддержке.

2.       Хак поломается при любом изменения кода, от которого он напрямую зависит.

3.       Хак очень тяжело, а иногда и невозможно импортировать на другую платформу или окружение.

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

Третий метод оптимизации сайта – это правильное форматирование вашего кода, здесь применяется два способа:

Писать CSS  свойства каждый раз с новой строчки…

p {

margin-top: 35px;

text-indent: 20px;

}

или писать в одну строчку, при этом разделяя свойства пробелами…

p { margin-top: 35px; text-indent: 20px; }

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

Самое интересное в блоге :

Полезные моменты «черно�...

Оптимизация сайта. Песси...

Об оптимизации сайта

Несколько советов по стр...