Грамотное написание файлов стилей может разработчику значительно облегчить работу, сократив его объем до 2-х раз. Трудно оспорить, что работать с файлом в 1000 строк ощутимо проще, чем в 2000. Да и написать одну строку быстрей, чем четыре.
Так же не забываем, чем меньше символов в файле, тем меньше его вес. Чем меньше вес, тем быстрее грузятся страницы.
Не указываем единицы измерений для нулевых значений
Ноль в чем бы он ни был будет равен нулю. Поэтому
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(images/bg.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center top;
Сокращенный:
background: url(images/bg.png) center top #fff no-repeat scroll;
Порядок свойств значения не имеет. Но следует учесть, что первое значение background-position — значение относительно левого края блока, второе — относительно верхнего края для случаев, когда позиция фона задана координатами:
background-image: url(images/bg.png);
background-position: 10px 100px;
Сокращенный вариант:
background: url(images/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(images/ball.gif);
Сокращенный:
list-style: square inside url(images/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%
}