Частенько встречаю во многих исходниках CSS-файлы со следующим содержанием:

.class {
margin-top: 20px;
margin-bottom: 2px;
margin-right: 15px;
margin-left: 0px;
border-width: 10px;
border-style: solid;
border-color: #333333;
font-family: Verdana, Helvetica, Arial;
font-size: 19px;
font-weight: bold;
}

А теперь более компактная запись:

.class {
margin: 20px 15px 2px 0px;
border: 10px solid #333333;
font: bold 19px Verdana, Helvetica, Arial;
}

Думаю, что вы догадались о чём пойдёт речь. Да, да, о компактности и корректности CSS-листинга. Конечно же, рабочее состояние мы имеем в обеих ситуациях, но это уже вопрос семантической корректности кода. Именно здесь и хотелось бы подметить основные моменты, в которых многие кодеры допускают, так называемую, ошибку.

Отступы (margin и padding)

Имеем следующую ситуацию:

.class {
margin-top: 0px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;
}

Правильная запись:

.class {
margin: 0px 5px 10px 15px;
}

Видим, что компактная форма прописывает по определённому алгоритму: первое значение - верхний отступ, второе - правый, третье - нижний и последнее, четвёртое - левый.

Если же левый и правый отступы имеют одинаковые значения:

.class {
margin-top: 0px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
}

То краткая форма будет иметь вид:

.class {
margin: 0px 15px 10px;
}

А одинаковые значения отступов со всех сторон и вовсе заменяются одной записью:

.class {
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}

На:

.class {
margin: auto;
}

Рамки (border)

Меняем:

.class {
border-width: 2px;
border-style: solid;
border-color: red;
}

На:

.class {
border:2px solid red;
}

Если мы стилизуем правую границу, задавая следующие параметры:

.class {
border-right-width: 2px;
border-right-style: solid;
border-right-color: green;
}

То лучше всё это обратить в данную запись:

.class {
border-right:2px solid green;
}

Чтобы не прописывать ширину для каждой границы:

.class {
border-top-width: 9px;
border-right-width: 5px;
border-bottom-width: 9px;
border-left-width: 5px;
}

Воспользуемся краткой записью:

.class {
border-width: 9px 5px;
}

Фон (background)

Заменяем это:

.class {
background-color: #cccccc;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top left;
}

На это:

.class {
background:#ccc url(images/bg.gif) no-repeat 0 0;
}

Кстати, scroll мы в краткой форме не прописываем, т.к данный атрибут стоит по умолчанию, поэтому нет необходимости добавлять строки, которые и так будут применены без их написания.

Шрифт (font)

Заменяем это:

.class {
font-family: Arial, Helvetica;
font-size: 13px;
font-weight: bold;
font-style: italic;
font-variant: normal;
line-height: 1.5;
}

На это:

.class {
font:italic bold 13px/1.5 Arial, Helvetica;
}

А это:

.class {
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
}

На это:

.class {
font:bold 11px Tahoma;
}

Список (list-style)

Заменяем это:

.class {
list-style-image: url(images/bg.gif);
list-style-position: inside;
list-style-type: square;
}

На это:

.class {
list-style:square inside url(images/bg.gif);
}

Цвет (color)

Из курса HTML мы знаем, что шестнадцатиричный RGB-код задаётся по определённое формуле: первые две цифры - красный, другие две - зелёный и последние две - синий. А вот если цифры каждого цвета одинаковы между собой:

.class {
color:#ffcc00;
}

То можно можно записать в краткой форме, используя по одной цифре от каждого цвета:

.class {
color:#fc0;
}

Конечно же, если есть возможность, то заменяйте RGB-код обычным названием.

Используемый материал:

www.leigeber.com