Прошу оценить корректность формирования таблицы по БЭМ, как верно?

Question

[Лариса]

Попробовала собрать воедино всю найденную информацию.
Прошу помочь отшлифовать на этом примере подход к именованию классов по БЭМ

<table class="table">
        <caption class="table__caption">
            <h1>
                Данные по новорожденным за 2017 год
            </h1>
            <p>
                Согласно доступной статистике, средняя масса ребенка при рождении для полного 
срока беременности (сорок недель) составляют почти 3.5 кг, 
и приблизительно у 80% новорожденных вес колеблется между 2.75 — 4.25 кг.
            </p>          
        </caption>
        <thead class="table__header">
            <tr class="table__row table__row_header">
                <th class="table__cell table__cell_header">Имя</th>
                <th class="table__cell table__cell_header">Дата</th>
                <th class="table__cell table__cell_header">Рост</th>
                <th class="table__cell table__cell_header">Вес</th>
            </tr>
            <tr class="table__row table__row_header table__row_header-units">
                <td class="table__cell table__cell_header-units">фио</td>
                <td class="table__cell table__cell_header-units">гг.мм.дд</td>
                <td class="table__cell table__cell_header-units">в см.</td>
                <td class="table__cell table__cell_header-units">в гр.</td>
            </tr>
        </thead>
        <tfoot class="table__footer">
            <tr class="table__row table__row_footer">
                <td class="table__cell table__cell_footer" colspan="3">ИТОГО:</td>
                <td class="table__cell table__cell_footer">МНОГО</td>
            </tr>
        </tfoot>
        <tbody class="table__tbody">
            <tr class="table__row table__row_body">
                <td class="table__cell table__cell_body">Сидоров Иван Петрович</td>
                <td class="table__cell table__cell_body textLeft">2017.01.07</td>
                <td class="table__cell table__cell_body">53</td>
                <td class="table__cell table__cell_body">2500</td>
            </tr>
            <tr class="table__row table__row_body">
                <td class="table__cell table__cell_body">Иванов Петр Сидорович</td>
                <td class="table__cell table__cell_body textLeft">2017.02.01</td>
                <td class="table__cell table__cell_body">52</td>
                <td class="table__cell table__cell_body">4200</td>
            </tr>

        </tbody>
    </table>

К сожалению, корректных полных примеров не удалось найти, много примеров, но кратких

Comments

[Степан Крапивин]

по-моему это уже маразм.

Теги таблицы и так говорят сами за себя. И на вряд ли кто-то, где-то будет использовать, к примеру, тег tbody вне тега table. Поэтому нет никакого смысла делать .table__tbody.
То же касается и остальных тегов таблицы, которые нигде, повторяю НИГДЕ кроме как внутри table не используются.

Другое дело, когда у вас триллион div и span и не понятно какую роль они играют.
Тогда на помощь приходи БЭМ.

[Сергей delphinpro]

Степан: есть таблица, Дизайн ячеек отличается в thead tbody, есть четыре столбика. в первом нет горизонтальных паддингов (картинка), в последнем - выравнивание по низу, в третьем - болд.
Еще есть такая же таблица, но в ней пара столбиков поменялись местами.
В третьей таблице один столбик перемещен, один отсутствует. Ларисе с ее классами ничего не надо делать. Вы будете на каждую таблицу писать отдельные перекрывающие стили, потому что простой класс не перебьет стиль .table > tbody > td
Так что, как говорилось в одной старой рекламе - всё правильно сделала.

[Лариса]

Сергей: большое спасибо)
Нет ли у Вас каких-либо рекомендаций, может что-то поправить/изменить?

[Сергей delphinpro]

Лариса: нет, норм.

[Степан Крапивин]

Сергей: Ну то есть вы имеете ввиду, что у других таблиц не будет <table><tbody class="table__tbody">?
Да точно так же будут! Поэтому это двойная работа и все ваши слова про переназначение стилей абсолютно так же применимы к выше описанной вёрстке.
Или вы хотите сказать, что в какой-то момент нужно назначить класс .table__tbody для тега tfoot? Серьёзно?

[Лариса]

Степан: Я разместила заготовку таблицу именованную классами согласно БЭМ
дальше ее судьба
1. используется как есть в стилях основных
2. добавлениями модификаторов ее можно видоизменять, но основные стили останутся

Я правильно понимаю тему вопроса как
table__tbody - основной стиль
table__tbody table__tbody_модификатор - новый стиль

Answer 1

[Олег]

В разметке ошибок нет, единственное, не очень понятный класс textLeft, также вполне вероятно можно отказаться от модификаторов ячейки в пользу каскада от строки.

Comments

[Лариса]

А если на странице будет две типовые таблицы с разным дизайном ?
например,



Что Вы понимаете под каскадом строк ?
Может псевдокласс :nth-child ?

[Олег]

Лариса: Я про обычный css каскад, если в таблице не будет еще одной таблицы, то добавлять каждой ячейке модификатор нет смысла, можно просто написать: .table__row_tbody .table__cell {...}

Что касается двух таблиц, то общие св-ва можно описать в блоке table, особенности каждой таблицы вынести в модификатор, если таблицы вообще не похожи, то можно сделать их разными блоками.

[Лариса]

Олег: но БЭМ рекомендует не использовать конструкции такого вида
.table__row_tbody .table__cell

Методология БЭМ допускает использование вложенных селекторов, но рекомендует по максимуму их сократить. Вложенные селекторы увеличивают связность кода и делают его повторное использование невозможным.

[Лариса]

textLeft

это как раз очень понятно должно быть - текст выравнивается по левому краю

[Олег]

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