Сегодня мы поговорим об оптимизации не сайта, а 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 стиля и сайта, это его сжатие не ручным методом, а при помощи программ, которых полным полно в интернете, что тоже очень существенно повлияет на размер файла.
Если писать CSS в одну строку, то читабельность такого кода снизится и его будет сложнее поддерживать.