# Правила форматирования CSS

Для того, чтобы CSS легко читался, полезно соблюдать пять правил форматирования.
[cut]

## Каждое свойство -- на отдельной строке

Так -- неверно:

```css
/*+ no-beautify */
#snapshot-box h2 { padding: 0 0 6px 0; font-weight: bold; position: absolute; left: 0; top: 0; }
```

Так -- правильно:

```css
/*+ no-beautify */
#snapshot-box h2 {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 0 6px 0; 
  font-weight: bold; 
}
```

Цель -- лучшая читаемость, проще найти и поправить свойство.

## Каждый селектор -- на отдельной строке

Неправильно:

```css
/*+ no-beautify */
#snapshot-box h2, #profile-box h2, #order-box h2 {
  padding: 0 0 6px 0; 
  font-weight: bold; 
}
```

Правильно:

```css
/*+ no-beautify */
#snapshot-box h2, 
#profile-box h2, 
#order-box h2 {
  padding: 0 0 6px 0; 
  font-weight: bold; 
}
```

Цель -- лучшая читаемость, проще найти селектор.

## Свойства, сильнее влияющие на документ, идут первыми

Рекомендуется располагать свойства в следующем порядке:
<ol>
<li>Сначала положение элемента относительно других: 
`position`, `left/right/top/bottom`, `float`, `clear`, `z-index`.</li>
<li>Затем размеры и отступы: 
`width`, `height`, `margin`, `padding`...</li>
<li>Рамка `border`, она частично относится к размерам.</li>
<li>Общее оформление содержимого: 
`list-style-type`, `overflow`...</li>
<li>Цветовое и стилевое оформление: 
`background`, `color`, `font`...</li>
</ol>

**Общая логика сортировки: "от общего -- к локальному и менее важному".**

При таком порядке свойства, определяющие структуру документа, будут видны наиболее отчётливо, в начале, а самые незначительно влияющие (например цвет) -- в конце.

Например:

```css
/*+ no-beautify */
#snapshot-box h2 {
  position: absolute; /* позиционирование */
  left: 0;
  top: 0;

  padding: 0 0 6px 0; /* размеры и отступы */

  color: red;         /* стилевое оформление */
  font-weight: bold;  
}
```

</li>
<li>**Свойство без префикса пишется последним.**

Например:

```css
-webkit-box-shadow:0 0 100px 20px #000;
box-shadow:0 0 100px 20px #000;
```

Это нужно, чтобы стандартная (окончательная) реализация всегда была важнее, чем временные браузерные. 
</li>

## Организация CSS-файлов проекта

Стили можно разделить на две основные группы:
<ol>
<li>**Блоки-компоненты имеют свой CSS.** Например, CSS для диалогового окна, CSS для профиля посетителя, CSS для меню.

Такой CSS идёт "в комплекте" с модулем, его удобно выделять в отдельные файлы и подключать через `@import`. 

Конечно, при разработке будет много CSS-файлов, но при выкладке проекта система сборки и сжатия CSS заменит директивы `@import` на их содержимое, объединяя все CSS в один файл.
</li>
<li>**Страничный и интегрирующий CSS**.
Этот CSS описывает общий вид страницы, расположение компонент и их дополнительную стилизацию, зависящую от места на странице и т.п.

```css
/*+ no-beautify */
.tab .profile { /* профиль внутри вкладки */
  float: left;
  width: 300px;
  height: 200px;
}
```

Важные страничные блоки можно выделять особыми комментариями:

```css
/** ===========================
 *  Профиль посетителя
 *  ===========================
*/

.profile {
  border: 1px solid gray;
}

.profile h2 {
  color: blue;
  font-size: 1.8em;
}
```

</li>
</ol>


CSS-препроцессоры, такие как [SASS](http://sass-lang.com/), [LESS](http://lesscss.org/), [Stylus](http://learnboost.github.com/stylus/), [Autoprefixer](https://github.com/postcss/autoprefixer) делают написание CSS сильно удобнее.. 

Выберите один из них и используйте. Единственно, они добавляют дополнительную предобработку CSS, которую нужно учесть, и желательно, на сервере.