@dmitriyivvvv

И снова БЭМ, служебный(приватный блок)?

Добрый день! Снова возник вопрос по БЭМ. Как известно в нем существуют служебные блоки, которые не используются отдельно от своего родительского элемента, но и не являются элементами из-за сложной структуры. В моем случае это блок events-list в блоке events. Все ли я правильно понял и верна ли моя разметка по правилам БЭМ?
<div class="events">
            <h3 class="events__title">Upcoming events</h3>
            <ul class="events-list">
              <li class="events-list__item">
                <a href="#" class="events-list__link">
                  <div class="events__calendar">
                    <span class="events__day">5</span><br>
                    <span class="events__month">May</span>
                  </div>
                  <p class="events__details">some random event</p>
                </a>
              </li>
              <li class="events-list__item">
                <a href="#" class="events-list__link">
                  <div class="events__calendar">
                    <span class="events__day">24</span><br>
                    <span class="events__month">June</span>
                  </div>
                  <p class="events__details">some random event</p>
                </a>
              </li>
              <li class="events-list__item">
                <a href="#" class="events-list__link">
                  <div class="events__calendar">
                    <span class="events__day">24</span><br>
                    <span class="events__month">june</span>
                  </div>
                  <p class="events__details">some random event</p>
                </a>
              </li>
            </ul>
            <a class="btn" href="#">Посмотреть все</a>
</div>
  • Вопрос задан
  • 560 просмотров
Решения вопроса 1
@Free_ze
Пишу комментарии в комментарии, а не в ответы
У вас "внутри" event-list снова элементы от events? Это же нарушает главную идею блоков - модульность.

Мне кажется, блоками могли бы быть сами события (li), а содержащий их список - элемент блока events. Что-то вроде:

<div class="events">
    <h3 class="events__title">Upcoming events</h3>
    <ul class="events__list">
      <li class="event-list-item">
        <a href="#" class="event-list-item__link">
          <div class="event-list-item__calendar">
            <span class="event-list-item__day">5</span><br>
            <span class="event-list-item__month">May</span>
          </div>
          <p class="event-list-item__details">some random event</p>
        </a>
      </li>
      ...
    </ul>
    <a class="events__get-all-btn btn" href="#">Посмотреть все</a>
</div>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы