БЭМ

gistfile1.txt

БЭМ (read: http://ru.bem.info/articles/bem-for-small-projects/)

        Для имен классов используем БЭМ-поход

        БЭМ разделяет классы на три группы:
        Блок: основной корневой блок и стиль компонента
        Элемент: внутренние части блока, может быть сколь угодно много
        Модификатор: вариация, расширение блока или элемента


        Правила именования пременных:
            имена блоков, элементов и модификаторов должны быть недлинными и семантически значимыми;
            используем только латинские буквы, символ тире и цифры;
            не используем символ подчёркивания (_), он нам понадобится как специальный разделитель.

        ??? ОБЯЗАТЕЛЬНО имя блока начинать с «b-»

        Элемент отделяется двумя прочерками (__)
        ??? Модификатор отделяется двумя дефисами (--) (в оригинале один нижний прочерк)

        Если модификатор — пара «ключ-значение», добавляем ещё одно подчёркивание для отделения значения модификатора:
            .b-heading--level_alpha

        Классы-модификаторы используются совместно с классом блока или элемента:
            <div class="b-heading b-heading--level_alpha">BEM</div>

        Общий паттерн именования:
            названи-блока__название-элемента--название-модификатора_значение-модификатора {}

        Аналогия из жизни:
        .человек {}
        .человек__голова {}
        .человек--высокий {}
        .человек__голова--лысая {}


        НЕЛЬЗЯ делать элементы элементов: НЕПРАВИЛЬНО .block__elem1__elem2

        МОЖНО вкладывать один блок в другой, но вместо наследования (каскада) в стилях лучше использовать модификатор блока

        МОЖНО использовать наследование для модифицрованного блока:
            .человек--высокий .человек__голова {}
        То же самое в sass
            .человек__голова {
                .человек--высокий & {}
            }