- Максимальная длина строки с правилами и селекторами - 80 символов.
- Все свойства и селекторы на новой строке.
Обычное свойство:
селектор {
свойство: значение;
}
Свойства дочерних элементов:
селектор {
свойство: значение;
}
вложенный элемент {
свойство: значение;
}
- width, min-width
- height, min-height
- padding, margin (если свойства задаются по отдельности, описывать в порядке: top, right, bottom, left)
- позиция элемента (описывать в порядке: top, right, bottom, left)
- position
- display
- внешний вид (background, borders, box-shadow...)
- остальные свойства
- форматирование текста
a_b
- разделитель между селектором блока и модификаторомa-b
- разделитель между селектором блока и его вложенным элементом
.block {}
.block_modifier {}
.block-childBlock {}
.block-childBlock_modifier {}
.block-childBlock-child {}
/* и т. д. */
Мы используем SCSS и подключаем все файлы стилей при помощи @import
в application.css. Для каждого модуля (независимый html блок) создается новый файл.
app/
assets/
stylesheets/
modules/
[modulname].scss
additional.scss
application.css.scss
common.scss
layout.scss
params.scss
reset.scss
additional
- дополнительные свойства (clearfix, mixins)application
- подключение всех файлов стилей и модулей (при помощи @import)common
- общие стили (свойства тегов по умолчанию, свойства заголовков)layout
- свойства основных элементов разметкиparams
- параметры (переменные)reset
- сброс свойств по умолчанию (вариант Эрика Майера)
Remember:
ul.lab
.lab
.lab-list-wrap
ul.lab-list