145 lines
5 KiB
Markdown
145 lines
5 KiB
Markdown
# Правила форматирования 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/), [Prefix-free](http://leaverou.github.com/prefixfree/) делает написание CSS сильно удобнее..
|
||
|
||
Выберите один из них и используйте. Единственно, они добавляют дополнительную предобработку CSS, которую нужно учесть, и желательно, на сервере.
|
||
|