Как правильно по БЭМ реализовать два одинаковых по стилю блока?

Question

[indeveloping]

Есть два самостоятельных блока: услуги и преимущества. С точки зрения стилизации у них всё одинаково. Единственно что их отличает друг от друга, это содержимое. Как их реализовать в таком случае по БЭМ?

1. Оставить всё как есть, и задать обоим блокам одинаковые стили (продублировать).

.services {
  /* Стили */
}

.advantages {
  /* Стили */
}

<section class="services">
  <h2 class="heading">Услуги</h2>
  <ul class="services__list">
    <li>Услуга 1</li>
    <li>Услуга 2</li>
    <li>Услуга 3</li>
  </ul>
</section>

<section class="advantages">
  <h2 class="heading">Преимущества</h2>
  <ul class="advantages__list">
    <li>Преимущество 1</li>
    <li>Преимущество 2</li>
    <li>Преимущество 3</li>
  </ul>
</section>

2. Создать один блок с названием к примеру section, один раз задать ему стили, и применить к блокам услуги и преимущества

.section{
  /* Стили */
}

<section class="section">
  <h2 class="heading">Услуги</h2>
  <ul class="section__list">
    <li>Услуга 1</li>
    <li>Услуга 2</li>
    <li>Услуга 3</li>
  </ul>
</section>

<section class="section">
  <h2 class="heading">Преимущества</h2>
  <ul class="section__list">
    <li>Преимущество 1</li>
    <li>Преимущество 2</li>
    <li>Преимущество 3</li>
  </ul>
</section>

Я склоняюсь к первому варианту, так как важен сам блок и его содержимое, а не его стиль. Ведь в теории стили у этих блоков могут меняться на разных страницах. Но хотелось бы услышать другие мнения, и аргументы.

Comments

[Михаил]

шиза какая-то
одинаковые стили копировать только потому что потому?

[indeveloping]

Михаил, извините, стараюсь следовать принципам заложенными разработчиками. Если каждый будет условности вносить, в таком случае и смысла не будет от всего этого.

Answer 1

[mahmudchon]

Что если:

.section{
  /* Стили общие */
}
.services {
  /* Стили свои */
}

.advantages {
  /* Стили свои  */
}

<section class="section services">
  <h2 class="heading">Услуги</h2>
  <ul class="services__list">
    <li>Услуга 1</li>
    <li>Услуга 2</li>
    <li>Услуга 3</li>
  </ul>
</section>

<section class="section advantages">
  <h2 class="heading">Преимущества</h2>
  <ul class="advantages__list">
    <li>Преимущество 1</li>
    <li>Преимущество 2</li>
    <li>Преимущество 3</li>
  </ul>
</section>

Comments

[indeveloping]

Это миксование получается, которое в данном случае не совсем подойдет, так как классы advantages и services будут пустышками, у них стили одинаковые. В примере который я привёл у блоков есть только общие стили, у них нет своих стилей.

[mahmudchon]

indeveloping, согласен, Вы написали про БЭМ не спроста, но я на 100% согласен с комментарием выше:
"шиза какая-то
одинаковые стили копировать только потому что потому?"
И вопрос этот у Вас по тем же причинам тут появился, видимо.

[indeveloping]

mahmudchon, определение из официальной документации:

Название блока характеризует смысл («что это?» — «меню»: menu, «кнопка»: button), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big).

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

[mahmudchon]

indeveloping, тут уже думать своей головой или чужой. Решать Вам. Опять же - ничто не мешает брать из каждого места его лучшие стороны и делать так, как душа велит)