renovations

8-css-for-js/18-css-format/article.md

@@ -0,0 +1,145 @@
+# Правила форматирования CSS
+
+Для того, чтобы CSS легко читался, полезно соблюдать пять правил форматирования.
+[cut]
+
+## Каждое свойство -- на отдельной строке
+
+Так -- неверно:
+
+```css
+##snapshot-box h2 { padding: 0 0 6px 0; font-weight: bold; position: absolute; left: 0; top: 0; }
+```
+
+Так -- правильно:
+
+```css
+##snapshot-box h2 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 0 0 6px 0; 
+  font-weight: bold; 
+}
+```
+
+Цель -- лучшая читаемость, проще найти и поправить свойство.
+
+## Каждый селектор -- на отдельной строке
+
+Неправильно:
+
+```css
+##snapshot-box h2, #profile-box h2, #order-box h2 {
+  padding: 0 0 6px 0; 
+  font-weight: bold; 
+}
+```
+
+Правильно:
+
+```css
+##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
+##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
+.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, которую нужно учесть, и желательно, на сервере.
+