CSS

CSS
CSS синтаксис

- Для отступов вместо пробелов используется семантичная табуляция. В любом

редакторе кода размер можно настроить на своё усмотрение (например, размер
табуляции 4).
В этом примере `∙∙∙∙` - четыре пробела, а `―` - один отступ с табуляцией.

/* Плохо */
.heading {
∙∙∙∙font-size: 32px;
}

/* Хорошо */
.heading {
―font-size: 32px;
}

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

/* Плохо */
.header, .main, .footer {
margin-left: auto;
margin-right: auto;
}

/* Хорошо */
.header,
.main,
.footer {
margin-left: auto;
margin-right: auto;
}

- 1 пробел перед `{`

/* Плохо */
.heading{
 font-size: 32px;
}

/* Хорошо */
.heading {
font-size: 32px;
}

- 1 перенос на новою строку перед `}`

/* Плохо */
.heading {
font-size: 32px;}

.heading {
font-size: 32px;
}

/* Хорошо */
.heading {
font-size: 32px;
}

- 1 перенос на новую строку после `}` и между группами объявлений

/* Плохо */
.heading {
font-size: 32px;
}
.highlight {
background-color: #f00;
}

/* Хорошо */
.heading {
font-size: 32px;
}

.highlight {
background-color: #f00;
}
- 1 пробел после `:`

/* Плохо */
.heading {
font-size:32px;
}

/* Хорошо */
.heading {
font-size: 32px;
}

- Все объявления завершаются с `;`

/* Плохо */
.heading {
font-size: 32px
}

/* Хорошо */
.heading {
font-size: 32px;
}

- 1 пробел после запятых в значениях свойств

/* Плохо */
.header {
background-color: rgba(0,0,0,.5);
}

/* Хорошо */
.header {
background-color: rgba(0, 0, 0, .5);
}

- Не добавляйте начальный ноль для значений

/* Плохо */
.transparent {
opacity: 0.5;
}
/* Хорошо */
.transparent {
opacity: .5;
}

- Все 16-ичные значения записывайте строчными буквами (в нижнем регистре).

Строчные буквы гораздо легче различить при просмотре файла, поскольку они, как
правило, имеют больше уникальных форм.

/* Плохо */
.white {
background-color: #FFF;
}

/* Хорошо */
.white {
background-color: #fff;
}

- `'` для значений атрибутов внутри селектора, вокруг url, в значении свойства
content

/* Плохо */
input[type=text] {
/* ... */
}

/* Хорошо */
input[type='text'] {
/* ... */
}
```

- Опускайте единицы измерения при нулевом значении

/* Плохо */
.header {
margin-top: 0px;
}

/* Хорошо */
.header {
margin-top: 0;
}

Порядок объявления

Объявления логически связанных свойств должны быть сгруппированы в

следующем порядке:

- Позиционирование - может удалить элемент из нормального потока документа и

переопределить блочную модель связанных стилей.
- Расположение - задаются внешние и внутренние отступы.
- Блочная модель - диктует размеры
- Отображение - цвет, фон и т.п.
- Типографика - шрифты, стилизация текста
- Прочее - трансформации, поведение и т.п.

Небольшой пример:

.declaration-order {
/* Позиционирование */
position: absolute;
z-index: 100;
top: 0;
right: 0;
left: 0;
bottom: 0;

/* Расположение */
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding: 8px 16px;

/* Блочная модель */
display: block;
float: left;
width: 100px;
height: 100px;

/* Отображение */
color: #333;
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
 border-radius: 3px;
opacity: 1;

/* Типографика */
font-family: 'Helvetica Neue', sans-serif;
font-size: 14px;
line-height: 24px;
text-align: center;

/* Прочее */
transition: .25s ease-out;
transform: scale(.75);
}

Не используйте @import

По сравнению с тегом `<link>` правило `@import` медленнее, создает дополнительные

запросы и может вызвать иные непредвиденные проблемы. Избегайте это правило и
используйте вместо него один из альтернативных подходов:

- Склеивайте CSS-файлы в один файл и минифицируйте.

- Компилируйте CSS-код в один файл с помощью препроцессоров, например, Stylus, Sass
или Less.

Для получения дополнительной информации следует ознакомиться со статьей Стива

Соудерса.

<!-- Избегайте @import -->

<style>
@import url(assets/styles/main.css);
</style>

<!-- Используйте тег link -->

<link rel="stylesheet" href="assets/styles/main.min.css">

Место для media query

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

насколько это возможно. Не объединяйте их в отдельную таблицу стилей, помещайте их в
конце соответствующего less-файла. В противном случае это приведет к тому, что
медиавыражения будет сложно найти.
Вот типичная структура:

.element { /* ... */ }
.element-avatar { /* ... */ }
.element-selected { /* ... */ }

@media only screen and (min-width: 480px) {

.element { /* ... */}
.element-avatar { /* ... */ }
.element-selected { /* ... */ }
}

Правила с одиночными объявлениями

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

Ключевым фактором здесь является обнаружение ошибок — например, валидатор CSS

сообщает вам, что в строке 183 есть синтаксическая ошибка. С одиночным объявлением
не возникнет сложности с исправлением. В случае с несколькими объявлениями,
разделенными на строки, так же проблем не возникнет. Но если несколько объявлений
будут записаны в одну строку, то вам будет сложнее понять какое именно объявление
вызвало синтаксическую ошибку.

/* Плохо */
.sprite { display: inline-block; width: 16px; height: 16px; background-image:
url(../images/sprite.png); }
.sprite-home { background-position: 0 -20px; }
.sprite-account { background-position: 0 -40px; }

/* Хорошо */
.sprite {
display: inline-block;
width: 16px;
height: 16px;
background-image: url(../img/sprite.png);
}

.sprite-home {
background-position: 0 -20px;
}

.sprite-account {
background-position: 0 -40px;
}

Сокращенная запись

Старайтесь ограничить использование сокращенных объявлений в тех случаях, когда

необходимо явно задать все доступные значения. Наиболее часто злоупотребляют
сокращением следующих свойств:
- `padding`
- `margin`
- `font`
- `background`
- `border`
- `border-radius`

Часто нам не нужно устанавливать все значения сокращенной записи свойства.

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

На сайте Mozilla Developer Network есть отличная статья о сокращенной записи свойств
для тех кто не знаком с такой формой записи.

/* Плохо */
.element {
margin: 0 0 10px;
background: red;
background: url(../img/image.jpg);
border-radius: 3px 3px 0 0;
}

/* Хорошо */
.element {
margin-bottom: 10px;
background-color: red;
background-image: url(../img/image.jpg);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}

Комментарии

- Пишите комментарии только по мере необходимости, передающие контекст и цель кода,

а не просто повторение названия класса или компонента.
- Всё комментировать не нужно.

Селекторы

- Используйте только классы вместо тегов для оптимальной производительности

отображения.
- Не используйте селекторы по атрибуту (например, `[class^="..."]`) для часто
встречающихся компонентов. Это негативно повлияет на производительность браузера.
- Не используйте идентификаторы.
- Используйте короткие селекторы.
- Не используйте сложный каскад (вложенность селекторов).
- Вложенность селекторов допускается в случае необходимости, например, когда нужно
изменить свойства при наведении (`:hover`) или другом подобного псевдоселекторе, и при
использовании специальных глобальных классов.

/* Плохо */
span { /* ... */ }
a.link { /* ... */ }
#logo { /* ... */ }
.page-container #stream .stream-item .tweet .tweet-header .username { /* ... */ }
.user { /* ... */ }

/* Хорошо */
.link {
/* ... */
}

.user {
/* ... */
}

.user:hover .user__name {
/* ... */
}
Организация кода

- CSS-код в стартовом шаблоне проекта разделяется на отдельные less-файлы со своими

составляющими:

Глобальные стили
1. шрифты (global/fonts.less)
2. переменные (global/vars.less)
3. сброс браузерных стилей (bootstrap/bootstrap-reboot.less)
4. общие стили для всего проекта (global/global.less)

Стили Bootstrap
5. сетка (bootstrap/bootstrap-grid.less)
6. стили отдельных плагинов (bootstrap/bootstrap-modals.less, ...)

Стили плагинов
7. стили плагинов (plugins/swiper.less, ...)

Стили блоков и компонентов

8. Элементы форм (elements/form-elements.less)
9. Шапка, футер и т.д. (elements/header.less, elements/footer.less, ...)

- Ориентируйтесь на блоки и компоненты, а не на страницы, которые могут быть

переработаны, а блоки и компоненты могут перемещаться с одной страницы на другую.