О сокращении объемов файлов стилей css шаблона сайта и его влияние на скорость загрузки сайта уже рассказывалось. На сайте в топ меню даже представлен сервис оптимизации файлов стилей.

Остановимся на некоторых моментах, которые дополнительно позволят вам уменьшить размеры файлов без ухудшения работоспособности. Сокращенные формы записи стилей вполне применимы к таким свойствам как margin, border, padding, background, font, list-style.

Часто в файле стилей можно видеть примерно такую запись:

.widget{
margin-top:10px;
margin-right:20px;
margin-bottom:10px;
margin-left:20px;
}

Сокращенный же аналог записи имеет вид:

.widget{margin:10px 20px 10px 20px;}

Свойства определяются от top и по часовой до left.

Последнюю запись можно сократить еще. Параметры определяются попарно top-bottom, right-left. И, если параметры пар повторяются, то вполне можно убрать определение для второго параметра:

.widget{margin:10px 20px;}

Аналогичные сокращения применимы и к padding, border.

Пример сокращений для свойства font:

.riba{
font-style:italic;
font-size:12px;
font-family:arial;
}

Запись говорит, что стиль оформляется шрифтом в стиле italic размером 12 px набором arial. Сокращенная запись будет иметь уже следующий вид:

.riba{font:italic 12px arial;}

Отметим еще один момент, для интерпретатора запись 0px аналогична записи 0. Всего то 2 знака, а если таковых обнаружится не один десяток?

Это лишь несколько примеров в использовании форм сокращений свойств CSS. Их использование корректно, позволяет дополнительно сократить ваш код.