Сокращения в CSS

Грамотное написание файлов стилей может разработчику значительно облегчить работу, сократив его объем до 2-х раз. Трудно оспорить, что работать с файлом в 1000 строк ощутимо проще, чем в. Да и написать одну строку быстрей, чем четыре.

Так же не забываем, чем меньше символов в файле, тем меньше его вес. Чем меньше вес, тем быстрее грузятся страницы.

Не указываем единицы измерений для нулевых значений

Ноль в чем бы он ни был будет равен нулю. Поэтому

margin-top: 0px;

лучше написать как

margin-top: 0;

Правила сокращений цветов background и color

Цвета можно задавать в шестнадцатеричном коде — каждый цвет описывается 6 цифрами в шестнадцатиричном формате. Например белый (white) = #FFFFFF, красный (red) = #FF0000. Код цвет можно сократить, если все 6 цифр одинаковы. Например,
#FFFFFF = #FFF
#000000 = #000

Правила сокращений для background

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

background-color: #fff;
background-image: url(path-to/bg.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center top;

Сокращенный:

background: url(path-to/bg.png) center top #fff no-repeat scroll;

Порядок свойств значения не имеет. Но следует учесть, что первое значение background-position — значение относительно левого края блока, второе — относительно верхнего края для случаев, когда позиция фона задана координатами:

background-image: url(path-to/bg.png);
background-position: 10px 100px;

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

background: url(path-to/bg.png) 10px 100px;

Правила сокращений для border

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

border-width: 3px;
border-style: solid;
border-color: #000;

Сокращенный:

border: 3px solid #000;

Порядок строгий — ширина бордюра (border-width), тип бордюра (border-style), цвет бордюра (border-color). Аналогичное сокращение действует и для border-bottom, border-left, border-top, border-right. Например:

border-right: 3px solid #000;

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

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

font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 100%;
line-height: 1.2em;
font-family: Tahoma, Arial, sans-serif;

Сокращенный:

font: italic small-caps bold 100%/1.2em Tahoma, Arial, sans-serif;

Порядок имеет значение — первыми идут font-style, font-variant, font-weight не важно в каком порядке, далее пара font-size/line-height, затем font-family.

Правила сокращений для list-style

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

list-style-type: square;
list-style-position: inside;
list-style-image: url(path-to/ball.gif);

Сокращенный:

list-style: square inside url(path-to/ball.gif);

Порядок значения не имеет.

Правила сокращений для margin и padding

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

margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;

Сокращенный:

margin: 10px 15px 20px 25px;

Порядок жестко определен — margin-top, margin-right, margin-bottom, margin-left. Запомнить очень легко — начиная сверху по часовой стрелке. Для padding правило аналогино:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;

Сокращенный:

padding: 10px 15px 20px 25px;

Если значения всех отступов одинаковы, можно сделать запись еще компактней.

margin: 10px 10px 10px 10px;

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

margin: 10px;

Также возможны парные сокращения:

padding: 10px 20px 10px 20px;

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

padding: 10px 20px;

Не ставим точку с запятой для последних свойств элементов

Для последних свойств элементов (классов) не обязательно ставить точку с запятой. Без нее нормально работает и CSS проходит валидацию.

div {
margin: 10px 20px;
float: left
}
a {
color: #000;
text-decoration: underline;
font-size: 85%
}

update by dma84: Некоторые браузеры игнорируют последнее свойство, если закрывающая скобка отделена от свойства пробелом или переводом строки (если кто знает подробней об этой особенности, например, в каком браузере наблюдается — пишите).