BEM Methodology, is the name of the elements correct?

Question

css

Now I am creating an element in JavaScript, and it seems to me that I screwed up with the class names according to BEM, what should I change? Specifically, I don’t like long class names like pasta.

'<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

It seems to me that instead of chat_header-play-button_hidden , play-button_hidden is quite possible. Similar in several places

Answer 2

Well, so +\- .
You don't have a single block in the middle, just elements.
example:
button- common button styles from the border inward.
button_mod- varieties: sizes, colors, etc. (from the border inside).
parent__button- everything related to the positioning of the button (external geometry) of the button in the parent element (if necessary) - from the border outwards.