Раскладка таблицей

Блок b-layout-table — таблица со 100% шириной, для создания раскладки.

Bemhtml шаблон блока выводит таблицу, строки и ячейки со всеми необходимыми атрибутами.

Ячейки блока могут быть представлены либо елементом cell, либо элементом gap. Элемент cell предназначен для вложения контента, а элемент gap служит распоркой.

Давайте рассмотрим BEMJSON блока:

{
    block: 'b-layout-table',
    mods: { layout: '58-40'},
    content: [
        {
            elem: 'row',
            content: [
                {
                    elem: 'gap',
                    rowspan: '2'
                },
                {
                    elem: 'cell',
                    content: {
                        elem: 'inner',
                        content: 'Left cell'
                    }
                },
                {
                    elem: 'cell',
                    elemMods: { position: 'r'},
                    content: 'Right cell'
                }
            ]
        },
        {
            elem: 'row',
            content: [
                {
                    elem: 'cell',
                    colspan: '2',
                    content: 'Second row and one cell'
                }
            ]
        }
    ]
}

По умолчанию в блоке не задаются ширины ячейкам. Доопределить блок своими стилями можно следующим образом: добавляем модификатор блоку — mods: { layout: '58-40' } и ячейке — elemMods: { position: 'r' }. Элементом inner оборачиваем контент ячеек, что позволяет задать нужные нам отступы. Далее, используя каскад, задаем нужные нам CSS свойства.

Вот такой CSS получится к BEMJSON, приведенному выше:

.b-layout-table_layout_58-40 .b-layout-table__cell_position_r
{
    width: 40%;
}

.b-layout-table_layout_58-40 .b-layout-table__gap
{
    width: 2%;
    padding-left: 20px;
}

.b-layout-table_layout_58-40 .b-layout-table__inner
{
    margin-right: 0.8em;
}

Обратите внимание, что нельзя задавать самому блоку никаких дополнительных CSS свойств, это может привести к конфликтам в верстке, так как блок может быть использован в реализации других блоков.

Важно: использовать блок нужно, задавая ему модификатор или миксируя его с другим блоком/элементом.