Как правильно использовать миксы классов?

Question

[Fehax]

Парни, научите, пожалуйста, ГРАММОТНО использовать микс классов.
В моём проекте часто попадаются случаи, что я должен использовать какой-то элемент по десятку раз.
Я создаю его в html, накидываю ему общие стили ( цвет, размер букв и тд ), дальше в каждом блоке, я его оборачиваю каким-то дивом. Если элементу ещё что-то нужно добавить, к примеру, нужно разместить справа, а не слева, как он стоит, то обращаюсь в css .родительский_блок_повторяющегося_элемента .сам_повторяющийся_элемент {позиция: справа}. Тогда, выходит, что я использую вложенность классов, а по БЭМ это запрещено.. Как правильно поступать?
И ещё вопрос, аналогичный: список. каждый элемент с разным фоном (на скрине пример). Задавать каждому элементу отдельный класс, это будет правильным? А если у меня их 50 этих элементов, думаю, это не очень хорошо будет.


Сформулирую ещё раз то, в чём хочу разобраться: 1. Как правильно создавать, стилизовать и работать с повторяющимися элементы?
2. Как правильно задать РАЗНЫЕ свойства элементам одного блока?

<div class="block">
  <div class="block__element">Этот див должен быть красным</div>
  <div class="block__element">а этот зелёным</div>
  <div class="block__element">этот синим</div>
</div>

Answer 1

[Михаил Р.]

<div class="block">
  <div class="block__element block__element_red">Этот див должен быть красным</div>
  <div class="block__element block__element_green">а этот зелёным</div>
  <div class="block__element block__element_blue">этот синим</div>
</div>

// если будут более сложные модификаторы
<div class="block">
  <div class="block__element block__element_color block__element_color_red">Этот див должен быть красным</div>
  <div class="block__element block__element_color block__element_color_green">а этот зелёным</div>
  <div class="block__element block__element_color block__element_color_blue">этот синим</div>
</div>

SCSS:

.block {
  &__element {
    &_color {
      &_red {
        color: red;
      }
    }
  }
}

Comments

[Fehax]

Выглядит комфортно. Спасибо огромное! Я так понимаю, что это это не нарушает БЭМ и можно обойтись без вложенности
А насчёт повторяющихся элементов? Можете на словах как-то пояснить нюансы?
Как с ними работать? Я имею в виду такое. Эти квадраты после каждого заголовка идут, после каждого параграфа. Я пояснил, как я их

задавал

В моём проекте часто попадаются случаи, что я должен использовать какой-то элемент по десятку раз.
Я создаю его в html, накидываю ему общие стили ( цвет, размер букв и тд ), дальше в каждом блоке, я его оборачиваю каким-то дивом. Если элементу ещё что-то нужно добавить, к примеру, нужно разместить справа, а не слева, как он стоит, то обращаюсь в css .родительский_блок_повторяющегося_элемента .сам_повторяющийся_элемент {позиция: справа}. ?

Как бы Вы это сделали?

[Михаил Р.]

Я так понимаю, что это это не нарушает БЭМ и можно обойтись без вложенности

Можно и так и так:
https://ru.bem.info/methodology/html/#%D0%B2%D0%BB...

<ul class="menu">
    <li class="menu__item">
        <a class="menu__link" href="https://">...</a>
    </li>
</ul>

Но мне больше нравится такой вариант, можно сказать "избыточная вложенность", но мне и моим коллегам так проще поддерживать проект:

<ul class="menu">
  <li class="menu__item">
    
    <a class="link" href="https://">
      <span class="link__item link__item_icon">☎</span>
      <span class="link__item link__item_content">Ссылко!</span>
    </a>
    
  </li>
</ul>

Про остальное не совсем понял...

[Fehax]

Михаил Р., как правильно размещать и работать с элементами, которые повторяются? Как именно Вы с ними работаете?