style-guidelines.md

Общее

• Максимальная длина строки с правилами и селекторами - 80 символов.
• Все свойства и селекторы на новой строке.

Описание свойства

Обычное свойство:

селектор {
    свойство: значение;
    }

Свойства дочерних элементов:

селектор {
    свойство: значение;
    }
    вложенный элемент {
        свойство: значение;
        }

Порядок свойств

1. width, min-width
2. height, min-height
3. padding, margin (если свойства задаются по отдельности, описывать в порядке: top, right, bottom, left)
4. позиция элемента (описывать в порядке: top, right, bottom, left)
5. position
6. display
7. внешний вид (background, borders, box-shadow...)
8. остальные свойства
9. форматирование текста

Наименование селекторов

• 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