Грамотное написание файлов стилей может разработчику значительно облегчить работу, сократив его объем до 2-х раз. Трудно оспорить, что работать с файлом в 1000 строк ощутимо проще, чем в 2000. Да и написать одну строку быстрей, чем четыре.
Так же не забываем, чем меньше символов в файле, тем меньше его вес. Чем меньше вес, тем быстрее грузятся страницы.
Не указываем единицы измерений для нулевых значений
Ноль в чем бы он ни был будет равен нулю. Поэтому
margin-top: 0px;
лучше написать как
margin-top: 0;
Правила сокращений цветов background и color
Цвета можно задавать в шестнадцатеричном коде — каждый цвет описывается 6 цифрами в шестнадцатиричном формате. Например белый (white) = #FFFFFF, красный (red) = #FF0000. Код цвет можно сократить, если все 6 цифр одинаковы. Например,
#FFFFFF = #FFF
#000000 = #000
Правила сокращений для background
Полный CSS:
background-color: #fff; background-image: url(path-to/bg.png); background-repeat: no-repeat; background-attachment: scroll; background-position: center top;
Сокращенный CSS:
background: url(path-to/bg.png) center top #fff no-repeat scroll;
Порядок свойств значения не имеет. Но следует учесть, что первое значение background-position — значение относительно левого края блока, второе — относительно верхнего края для случаев, когда позиция фона задана координатами:
CSS
background-image: url(path-to/bg.png); background-position: 10px 100px;
Сокращенный вариант CSS:
background: url(path-to/bg.png) 10px 100px;
Правила сокращений для border
Полный вариант CSS:
border-width: 3px; border-style: solid; border-color: #000;
Сокращенный CSS:
border: 3px solid #000;
Порядок строгий — ширина бордюра (border-width), тип бордюра (border-style), цвет бордюра (border-color). Аналогичное сокращение действует и для border-bottom, border-left, border-top, border-right. Например:
CSS
border-right: 3px solid #000;
Правила сокращений для font
Полный вариант CSS:
font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 100%; line-height: 1.2em; font-family: Tahoma, Arial, sans-serif;
Сокращенный CSS:
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
Полный вариант CSS:
list-style-type: square; list-style-position: inside; list-style-image: url(path-to/ball.gif);
Сокращенный CSS:
list-style: square inside url(path-to/ball.gif);
Порядок значения не имеет.
Правила сокращений для margin и padding
Полный вариант CSS:
margin-top: 10px; margin-right: 15px; margin-bottom: 20px; margin-left: 25px;
Сокращенный CSS:
margin: 10px 15px 20px 25px;
Порядок жестко определен — margin-top, margin-right, margin-bottom, margin-left. Запомнить очень легко — начиная сверху по часовой стрелке. Для padding правило аналогино:
CSS
padding-top: 10px; padding-right: 15px; padding-bottom: 20px; padding-left: 25px;
Сокращенный CSS:
padding: 10px 15px 20px 25px;
Если значения всех отступов одинаковы, можно сделать запись еще компактней.
CSS
margin: 10px 10px 10px 10px;
Сокращенный вариант:
CSS
margin: 10px;
Также возможны парные сокращения:
CSS
padding: 10px 20px 10px 20px;
Сокращенный вариант:
CSS
padding: 10px 20px;
Не ставим точку с запятой для последних свойств элементов
Для последних свойств элементов (классов) не обязательно ставить точку с запятой. Без нее нормально работает и CSS проходит валидацию.
CSS
div {
margin: 10px 20px;
float: left
}
a {
color: #000;
text-decoration: underline;
font-size: 85%
}