en.javascript.info/8-css-for-js/18-css-format/article.md

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

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

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

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

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

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

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

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

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

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

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

Правильно:

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

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

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

Рекомендуется располагать свойства в следующем порядке:

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

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

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

Например:

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

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

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

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

Например:

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

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

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

Стили можно разделить на две основные группы:

1. **Блоки-компоненты имеют свой CSS.** Например, CSS для диалогового окна, CSS для профиля посетителя, CSS для меню.

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

   Конечно, при разработке будет много CSS-файлов, но при выкладке проекта система сборки и сжатия CSS заменит директивы @import на их содержимое, объединяя все CSS в один файл.

2. **Страничный и интегрирующий CSS**. Этот CSS описывает общий вид страницы, расположение компонент и их дополнительную стилизацию, зависящую от места на странице и т.п.

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

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

   /** ===========================
    *  Профиль посетителя
    *  ===========================
   */
   
   .profile {
     border: 1px solid gray;
   }
   
   .profile h2 {
     color: blue;
     font-size: 1.8em;
   }
   

CSS-препроцессоры, такие как SASS, LESS, Stylus, Autoprefixer делают написание CSS сильно удобнее..

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