Учимся писать правильно CSS файлы

Под правильным CSS кодом я имею в виду - CSS код в котором свойства сокращены и объединены.
Большое количество начинающих вебмастеров, при работе с CSS кодом растягивают его до таких размеров, что потом становится трудно найти нужный кусок кода (при этом теряем кучу времени).

Мы получаем:
1. Меньший размер файла
2. Увеличит скорость под загрузку CSS стилей.

#div {
margin-top: 20px;
margin-bottom: 10px;
margin-right: 5px;
margin-left: 25px;
padding-top: 10px;
padding-bottom: 15px;
border-width: 1px;
border-style: solid;
border-color: #666666;
font-family: Verdana, Helvetica, Arial;
font-size: 14px;
font-weight: bold;
}

Приведенный выше код усеян свойствами, которые могут легко быть объединены для более четкого кода и уменьшение размера файла. Некоторые свойства могут быть даже полностью удалены, поскольку они по умолчанию уже работают. Ниже вы найдете примеры некоторых из наиболее полезных свойств CSS до и после сокращение.

Margin & Padding

#div {<>
margin-top: 0;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;
/* (auto, 0, px, pt, em or % ) */
}

#div {
margin:0 5px 10px 15px;
/* (top right bottom left) */
}

Пример 1

#div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 0;
margin-left: 20px;
}

#div {
margin:10px 20px 0;
/* (top right/left bottom) */
}

Пример 2

#div {
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#div {
margin:0 auto;
/* (top/bottom left/right) */
}

Пример 3

#div {
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
}

#div {
margin:50px;
/* (top/right/bottom/left) */
}

Border

#div {
border-width: 5px;
border-style: dotted;
border-color: blue;
}

#div {
border:5px dotted blue;
}

Пример 1

#div {
border-right-width: 2px;
border-right-style: solid;
border-right-color: #666666;
}

#div {
border-right:2px solid #666;
}

Пример 2

#div {
border-top-width: 3px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 2px;
}

#div {
border-width:3px 2px;
}

Background

#div {
background-color: #CCCCCC;
/* (named, hex, rgb or 0-255) (default = transparent) */
background-image: url(images/bg.gif);
/* (url or none) (default = none) */
background-repeat: no-repeat;
/* (repeat, repeat-x, repeat-y  or no-repeat) (default = repeat) */
background-attachment: scroll;
/* (fixed or scroll) (default = scroll) */
background-position: top left;
/* (top, right, left, bottom or center) (default = 0% 0%) */
}

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

Font

#div {
font-family: Verdana, Arial, Helvetica;
/* (Verdana, Arial, "Times New Roman", etc) (default = varies by browser) */
font-size: 12px;
/* (xx-small, medium, x-large, set value, etc) (default = medium) */
font-weight: bold;
/* (normal, bold, bolder, lighter, 100-900 or inherit) (default = normal) */
font-style: italic;
/* (normal, italic or oblique) (default = normal) */
font-variant: normal;
/* (normal or small-caps) (default = normal) */
line-height: 1.5;
/* (normal, px, pt, em, num or %) (default = normal) */
}

#div {
font:italic bold  12px/1.5 Verdana, Arial, Helvetica;
}

List

#div {
list-style-image: url(images/bullet.gif);
/* (url or none) (default = none) */
list-style-position: inside;
/* (inside or outside) (default = outside) */
list-style-type: square;
/* (circle, disc, square, etc) (default = disc) */
}

#div {
list-style:square inside url(images/bullet.gif);
}

Colors

Black: #000000 to #000
Blue: #0000ff to #00f
Dark Grey: #666666 to #666
Light Grey: #cccccc to #ccc
Orange: #ff6600 to #f60
White: #ffffff to #fff

Мой блог находят по следующим фразам
• плавный скроллинг к якорю
• player для сайта
• что делать чтобы моно было загрузить фото с галереи на сайт
• фейсбук лайки как считает
• html код
• скролл к нужному месту