Сокращения css | оптимизируем css код

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

Свойство background

Существует большое количество свойств управляющие параметрами фонового изображения. Однако набирать в стилевом файле все свойства поочередно, особенно такие длинные, как background-position, background-attachment, background-image и т. д., неразумно: ведь на это уйдет масса времени. Поэтому лучше всего использовать сокращенный вариант – свойство background.

Все фоновые свойства (background-attachment, background-color, background-image, background-position, background-repeat) можно записать в одном свойстве background. Значения свойств могут быть расположены в любом порядке.

CSS

body {
	 background-attachment:scroll;
	 background-color:#000;
	 background-image:none;
	 background-position:left top;
	 background-repeat:repeat-x;
    }

Сокращенный вариант:

CSS

body {
	 background: scroll left top repeat-x #000;
     }
/* вовсе не обязательно указывать все значения */ 

Свойство font

Для текста существует универсальное свойство font. Оно объединяет следующие свойства: font-style, font-variant, font-weight, font-size, /line-height, font-family. Однако существует несколько моментов:

• Обязательно требуется включать, соблюдая порядок включения, последние два свойства: font-size, font-family (семейство). Остальные свойства можно опустить и перечислять в любом порядке.
• Между значениями свойств ставится пробел. Запятая ставится только, чтобы разделить шрифты.
• Если назначаете line-height (межстрочный интервал), то перед размером шрифта (font-size) необходимо поставить слэш, например:

Полный вариант:

CSS

span{
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
	font-size:14px;
	line-height:18px;
	font-style:italic;
	font-variant:small-caps; 
    }

Сокращенный вариант:

CSS

span {       
font: italic bold small-caps 14px/18px Verdana, Geneva, sans-serif;
     }

Свойство border

Для границ следует использовать универсальное свойство border. Свойство border объединяет в себе свойства, которые принимают значения толщины, цвета и стиля (порядок включения значения не имеет). Это свойство оказывает воздействие на все четыре стороны рамки, поэтому к нему нельзя применять множественные значения для избирательного воздействия на определенные стороны рамки.

Полный вариант:

CSS

span{
	border-width: 2px;
	border-style: solid;
	border-color: #000;
    }

Сокращенный вариант:

CSS

span{         
border: solid 2px #000;
}

Свойства padding и margin

Чтобы установить величину поля (margin) для каждого края элемента, необходимо использовать свойство margin. Для всех отступов (padding) следует использовать свойство padding. Порядок, в котором действуют множественный значения свойств полей (margin) и отступов (padding), вы можете увидеть в таблице ниже.

Полный вариант:

CSS

span{
  padding-top: 1px;
  padding-right: 5px;
  padding-bottom: 2px;
  padding-left: 2px;
  margin-left:3px;
  margin-right:3px;
  margin-top:1px;
  margin-bottom:45px;
    }

Сокращенный вариант:

CSS

span{         
    padding: 1px 5px 2px 2px;
    margin:1px 3px 45px;
}

Пара нюансов

Чтобы сократить, совсем чуть-чуть, css код, не ставьте единицы измерения после 0. Также не обязательно ставить точку с запятой после последнего свойства в блоке объявлений.