Не могу понять, как правильно задавать классы большим вложенностям по методологии бэм?

Question

[gazes12]

Здравствуйте.
Есть код:

<section class="communication">

                <div class="communication__forms">

                    <div class="communication__forms-result"></div>
                    
                    <i class="communication__forms-arrow disabled fa-solid fa-reply"></i>


                    <div class="communication__forms-wrapper-create-recall visible">
                        <div>Оставь свой отзыв!</div>

                        <form>
                            <input type="text" placeholder="Имя">
                            <input type="text" placeholder="Фамилия (не обязательно)">
                            <textarea placeholder="Оставить отзыв..."></textarea>

                            <div>
                                <button>Очистить</button>
                                <button>Отправить</button>
                            </div>
                        </form>

                    </div>
                </div>    
            </section>

До communication__forms-wrapper-create-recall все понятно, ну не могу понять какие классы задавать ее объектам? Пробовал так:

<div class="communication__forms-wrapper-create-recall visible">
                        <div class="communication__forms-wrapper-create-recall-title">Оставь свой отзыв!</div>

                        <form class="communication__forms-wrapper-create-recall-form">
                            <input type="text" class="communication__forms-wrapper-create-recall-form-name" placeholder="Имя">
                            <input type="text" placeholder="Фамилия (не обязательно)" class="communication__forms-wrapper-create-recall-form-surname">
                            <textarea placeholder="Оставить отзыв..." class="communication__forms-wrapper-create-recall-form-recall"></textarea>

                            <div class="communication__forms-wrapper-create-recall-form-buttons">
                                <button class="communication__forms-wrapper-create-recall-form-buttons-clear">Очистить</button>
                                <button class="communication__forms-wrapper-create-recall-form-buttons-send">Отправить</button>
                            </div>
                        </form>

                    </div>

Мне кажется, что я че-то не так пишу и оно должно быть не так? Подскажите пожалуйста, как правильно реализовать классы для таких вложенностей? Буду очень рад за помощь!

Answer 1

[Виталий Першин]

Надо смотреть дизайн, чтобы более точно сказать как лучше, но в любом случае вы делаете не правильно.
Задавайте короткие лакончиные названия, если у вас это не получается, значит вы свернули не туда.
Чтобы получалось дробите блоки на более мелкие блоки.
Вместо этого ужаса communication__forms-wrapper-create-recall-form-buttons-send создайте отдельно блок кнопку button или любое другое не зарезервированное название. Кнопку вы можете модифицировать так button_clear button_send, хотя лучше конечно дать более общее название или вообще делить по типу например button_type_1 button_type_2. Затем если в контекте кнопка другая используте микс

<button class="communication_button button button_type_1">Очистить</button>

Очень аккуратно и понятно

то же самое с формой, создайте блок form и используйте как независимую структуру в нужном месте.

ну и вообще вы только вдумайтесь у вас есть якобы элемент communication__forms-wrapper-create-recall-form и вы наследуетесь от него все глубже и глубже communication__forms-wrapper-create-recall-form-name так нельзя делать, вы косвенно пытаетесь делать элемент элемента, каждый элемент должен наследоваться от блока и редких случаях можно немного разбавить связями по типу el__price el__price-old el__price-new

Comments

[gazes12]

Чтобы получалось дробите блоки на более мелкие блоки.

<section class="communication">
                <div class="communication__forms">

                    <div class="communication__result"></div>
                    <i class="communication__arrow disabled fa-solid fa-reply"></i>

                    <div class="create-recall">
                        <div class="create-recall__wrapper">
                            <div class="create-recall__title">Оставь свой отзыв!</div>

                            <form class="form-create-recall">
                                <input type="text" class="form-create-recall__name" placeholder="Имя">
                                <input type="text" placeholder="Фамилия (не обязательно)" class="form-create-recall__surname">
                                <textarea placeholder="Оставить отзыв..." class="form-create-recall__recall"></textarea>

                                <div class="buttons-create-recall">
                                    <button class="buttons-create-recal__clear">Очистить</button>
                                    <button class="buttons-create-recal__send">Отправить</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </section>

Правильно? Так нужно дробить блоки или по другому? Спасибо огромное за ваш ответ!

[Виталий Першин]

gazes12, Скорее как-то так, но без макета это все довольно абстрактно:

<section class="communication">
    <div class="communication__forms">

        <div class="communication__result"></div>
        <i class="communication__arrow disabled fa-solid fa-reply"></i>

        <form class="recall-form">
            <div class="recall-form__wrapper">
                <div class="recall-form__title">Оставь свой отзыв!</div>

                <form class="form__content">
                    <input type="text" class="recall-form__name" placeholder="Имя">
                    <input type="text" placeholder="Фамилия (не обязательно)" class="frecall-form__surname">
                    <textarea placeholder="Оставить отзыв..." class="recall-form__recall"></textarea>

                    <div class="recall-form__btns">
                        <button class="button button_clear">Очистить</button>
                        <button class="button button_send">Отправить</button>
                    </div>
                </form>
            </div>
        </form>
    </div>
</section>

[Виталий Першин]

gazes12, Старайтесь избегать длинных названий, на это боль смотреть

[gazes12]

Виталий Першин, Спасибо! Можно еще вопрос?

<section class="communication">
                <div class="communication__forms">

                    <div class="communication__result"></div>
                    <i class="communication__arrow disabled fa-solid fa-reply"></i>

                    <div class="create-recall">
                        <div class="create-recall__wrapper">
                            <div class="create-recall__title">Оставь свой отзыв!</div>

                            <form class="form-content">
                                <input type="text" class="form-content__name" placeholder="Имя">
                                <input type="text" placeholder="Фамилия (не обязательно)" class="form-content__surname">
                                <textarea placeholder="Оставить отзыв..." class="form-content__recall"></textarea>

                                <div class="create-recall__buttons">
                                    <button class="button button_clear">Очистить</button>
                                    <button class="button button_send">Отправить</button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="change-recall">
                        <div class="change-recall__wrapper">
                            <div class="change-recall__title">Измени отзыв!</div>

                            <form class="form-content">
                                <input type="text" class="form-content__name" placeholder="Имя">
                                <input type="text" placeholder="Фамилия (не обязательно)" class="form-content__surname">
                                <textarea placeholder="Оставить отзыв..." class="form-content__recall"></textarea>

                                <div class="change-recall__buttons">
                                    <button class="button button_clear">Очистить</button>
                                    <button class="button button_send">Отправить</button>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
            </section>

Тут есть две формы: create-recall и change-recall, у их form-content классы общие, а что если нужно по разному их стилизовать, например, тогда как лучше поступить?

[Виталий Першин]

gazes12, В первую очередь надо смотреть дизайн, тогда можно делать конкретные выводы. это может быть и модиикатор, и микс с блоком родителем, а так же это могут быть элементы с другими названиями. Если у нас form везде одинаковый, но меняется к примеру цвет или ширина, в каком-то месте, то это микс с родительским элементом, если мы видим, что варианты разного цвета могут встретиться и в других местах, это уже модификатор, если внутри элементы по другому расположены, мы можем использовать модификаторы или дополнительные обертки в контексте все того же form

[gazes12]

Виталий Першин, Мне в js нужно получить input`ы с change-recall и create-recall, мне нужно создать модификатор для form-content? form-content_create-recall, а потом уже в js писать

$('.form-content_create-recall > .form-content__name');

или задать модификатор самим инпутам? form-content__name_create-recall или задать модификатор для form-content и для элементов?

form-content_create-recall, form-content__name_create-recall

Как лучше поступить?

[Виталий Першин]

gazes12, Смотря как в какой момент вы хотите их получить, если в момент отправки, то для этого есть событие submit и вы можете отлавливать инпуты внутри отправляемой формы, а если хотите обращаться к инпутам, лучше используйте дата атрибуты или тег name

[gazes12]

Виталий Першин, Спасибо!