Правильно ли я написал структуру по методологии БЭМ?

Question

[gazes12]

<main class="main">
        <section class="about-us">
            <div class="about-us__container">
                <div class="about-us-top">
                    <div class="about-us-top__title">О нас</div>
                    <div class="about-us-top__sub-title"></div>
                    <div class="about-us-top__photo">
                        <img src="img/about-us/1.jpg" alt="Фото пример">
                    </div>
                </div>
                <div class="about-us-bottom">
                    <p class="about-us-bottom__description"></p>
                    <div class="report-problem">
                        <p class="report-problem__title">сообщить о проблеме:</p>
                        <div class="report-problem__items">
                            <div class="report-problem__item">
                                <p>Веб-Программист</p>
                                <p class="report-problem__name">Вася</p>
                            </div>
                            <a href="" target="_blank" class="report-problem__icon"><i class="fa-brands fa-discord"></i></a>
                            <div class="report-problem__item">
                                <p>Веб-Дизайнер</p>
                                <p class="report-problem__name">Петя</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

Мне не понятно правильно ли я задаю классы здесь:

<main class="main">
        <section class="about-us">
            <div class="about-us__container">
                <div class="about-us-top"></div>
                <div class="about-us-bottom">
                    <div class="report-problem">
                    </div>
                </div>
            </div>
        </section>
    </main>

Может надо писать about-us__about-us-top, а ни about-us-top, сверху же блок этого элемента. Та же ситуация с report-problem, надо писать about-us-bottom__report-problem или report-problem? Как правильно? Подскажите пожалуйста.

Answer 1

[Сергей delphinpro]

Блок и элемент можно совмещать на одном узле.
Блок описывает внешний вид, а элемент отвечает за позиционирование

<div class="block1">
  <div class="block1__element block2">
  </div>
</div>

.block2 {
  background: green;
}
.block1__element {
  position: relative;
  left: 50%;
  width: 50%;
}

Comments

[gazes12]

У меня about-top, about-bottom и report-problem отдельные блоки не зависиющие от главного about, как about__container, report-problem не зависит от about-bottom. Я эти блоки не буду переиспользовать нигде, правильно ли писать их отдельно, даже если не нужно переиспользовать их где-то?

[Сергей delphinpro]

gazes12, Для улучшения читаемости и поддержки кода выделение отдельных сущностей бывает полезным. Я бы сильно не заморачивался. Если вам кажется, что удобнее будет сделать отдельные блоки - сделайте.