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

Question

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

Answer 1

[Толстый Лорри]

У вас "внутри" 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>

Comments

[dmitriyivvvv]

Вот пример с сайта ccswizardry:

<section class="post" id="section:articles">
<ul class="list-ui  post__list  mb">
  <li class="list-ui__item">
    <time class="post__date" datetime=""></time>
    <h3 class="post__title"><a href=""></a></h3>
  </li>
  <li class="list-ui__item">
    <time class="post__date" datetime=""></time>
    <h3 class="post__title"><a href=""></a></h3>
  </li>
  <li class="list-ui__item">
    <time class="post__date" datetime=""></time>
    <h3 class="post__title"><a href=""></a></h3>
  </li>
  <li class="list-ui__item">
    <time class="post__date" datetime=""></time>
    <h3 class="post__title"><a href=""></a></h3>
  </li>
</ul>
</section>

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

[Толстый Лорри]

dmitriyivvvv, по рукам бить) У яндекса вы такого не найдете. Сами посудите: блок - по определению независимый элемент, который теоретически можно копипастить в любые части страницы. Там ничего не должно быть про родительские блоки. Это их основное отличие от бэм-элементов.