BEM Методология, правильное ли выбрано название элементов?

Question

[Роман]

Создаю сейчас элемент в JavaScript'е, и что то мне кажется я напортачил с названиями классов по БЕМ'у, что надо изменить? Конкретно не нравятся длинные как макароны названия классов.

'<div class="chat__content" >' +
                '<div class="chat__notice chat__notice_hidden">' +
                    '<span>' +
                        settings.texts.sessionExpired +
                    '</span>' +
                '</div>' +
                '<div class="chat__list">' +
                    '<div class="chat__header">' +
                        '<div class="chat__header-title">' +
                            settings.texts.title +
                            '<span class="chat__new-messages-count chat__new-messages-count_hidden">0</span>' +
                        '</div>' +
                        '<div class="chat__header-back-button chat__header-back-button_hidden">↩</div>' +
                        '<div class="chat__header-hide-button chat__header-hide-button_hidden">&minus;</div>' +
                    '</div>' +
                    '<span class="chat__list-message">' +
                    '</span>' +
                    '<dl class="chat__list-rows chat__list-rows_hidden">' +
                '</dl>' +
                '</div>' +
                '<div class="chat__conversation chat__conversation_hidden">' +
                    '<div class="chat__header">' +
                        '<div class="chat__header-indicator">' +
                            '<img class="chat__header-portrait" src="/user_white.svg">' +
                        '</div>' +
                        '<span class="chat__header-username">' +
                        '</span>' +
                        '<div class="chat__header-play-button chat__header-play-button_hidden">&#8227;</div>' +
                        '<div class="chat__header-close-button">&times;</div>' +
                    '</div>' +
                    '<div class="chat__video chat__video_hidden">' +
                    '</div>' +
                    '<div class="chat__conversation-body">' +
                        '<ul class="chat__rows">' +
                        '</ul>' +
                        '<label class="chat__input">' +
                            '<textarea placeholder="How about a magic trick" rows="3"></textarea>' +
                        '</label>' +
                    '</div>' +
                '</div>' +
            '</div>';

Answer 1

[Егор Живагин]

Мне кажется, что вместо chat_header-play-button_hidden вполне можно play-button_hidden . В нескольких местах подобное

Answer 2

[Vasyl Kovbassa]

Ну, так +\- .
У тебя нет ни одного блока в середине, одни элементы.
пример:
button- общие стили баттона от бордера внутрь.
button_mod- разновидности: размеры, цвета итд (от бордера внутрь).
parent__button- все, что касается позиционирования баттона (внешняя геометрия) батона в родительском элементе (если это необходимо) - от бордера наружу.