Каскадные таблицы стилей делают сайты более эффективными и удобными, так как они позволяют кешировать информацию о стилях связанных с файлом .css на Вашем сайте. Поэтому, отпадает необходимость считывания этих данных при последующих загрузках страниц. Следовательно, скорость открытия страниц в браузерах укорачивается. Даже если стили CSS (Cascading Style Sheets), сами по себе являются очень эффективным инструментом, всё равно они требуют оптимизации.
Для этого существуют правила привидения кода стилей к оптимальному виду, что ускорит работу веб-сайта. Добавляя или удаляя значения кода, прежде всего обратите внимание на строчки в файле CSS, которые можно объединить. Например, вместо:
margin-top: 9px;
margin-right: 20px;
margin-bottom: 11px;
margin-left: 22px;
Можно прописать:
margin: 9px 20px 11px 22px;
С другой стороны, если Вы хотите ограничить только одну сторону элемента сайта, то следует:
вместо
margin: 0px 0px 0px 22px;
прописать
margin-left: 22px;
Так как в этом случае, автоматически определяется, только одна сторона(левая), а в трансформации трёх других сторон надобности нет, потому-что они равны 0.
Мы также можем сократить CSS, если используются одинаковые значения атрибутов «margin» и «padding». Вот примеры:
margin: 9px 22px 11px 22px;
заменить на
margin: 9px 22px 11px;
Мы видим, что значение 22рх обозначает противоположные(правую и левую) стороны элемента и они в свою очередь идентичны. Поэтому, пропущенное четвертое поле(left) будет автоматически заполняться значением второго поля(right). Если к тому же, значения верхнего(top) и нижнего(bottom) полей одинаковы, то следует использовать следующий пример:
вместо
margin: 9px 22px 9px 22px;
пишем
margin: 9px 22px;
В CSS есть много атрибутов, которые можно укоротить, но «margin» и «padding» на мой взгляд являются самыми распространенными.
В коде HTML используются идентификаторы стилей «class» и «id». Их использование тоже потдается оптимизации. Например, вместо следующих строк:
<p class="decorated">Абзац с декорированным текстом</p>
<p class="decorated" >Второй абзац</p>
<p class="decorated">Третий абзац</p>
<p class="decorated">Четвертый абзац</p>
Следует указать:
<div class="decorated" >
<p>Абзац с декорированным текстом</p>
<p>Второй абзац</p>
<p>Третий абзац</p>
<p>Четвертый абзац</p>
</div>
Для оптимизации CSS Вы также можете воспользоваться сервисом CleanCSS или CSS_Compressor. Там просто нужно скопировать содержимое Вашего файла .css в соответствующую форму сервиса. Например, как на рисунке ниже:
После нажатия на кнопку (1) Вы получите оптимизированный код. То есть произойдет объединение аналогичных селекторов, удалятся ненужные свойства, пробелы и так далее.
