Не нарушила БЭМ ( или можно лучше)?

Question

[olya_097]

https://jsfiddle.net/jxdb6uLn/

Comments

[alex]

вы либо там с вложенностью тегов опечатались, либо какой-то странный у вас бэм

[Froggyweb]

нарушила
services__info-left

я менеджер - поменяйте местами информационные блоки в сервисе
img/pict__2.png - задротство ни о чем

[olya_097]

Alex, а как правильно?

[alex]

olya_097, никак. нет 100% правильного бэма, у каждого он свой. в ответе я написал так, как бы это сделал я

[olya_097]

Alex, спасибо
тоесть итак норм? https://jsfiddle.net/5oygt48p/

[alex]

olya_097, нуууу сойдет наверное. хотя как по мне - когда у вас более одного раза повторяется один и тот же элемент блока - это значит что лучше этот элемент выделить в отдельную сущность

[Ankhena]

__left и __right плохо. Названия классов не должны зависеть от положения или оформления.
Сейчас это лево и право, а на мобилках будет верх и низ. Будете переименовывать js'ом?

[olya_097]

Ankhena, та нет, так и оставлю
А как лучше?

[Ankhena]

olya_097, Ради чего сделан левый блок? Он нужен как контейнер для картинки. Пишем: class="inner-services__img-block".
Правый? Это описание услуги. Значит __text или __description или __content.

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

Answer 1

[alex]

Comments

[olya_097]

Alex, а для чего каждый из классов service services__item

[alex]

olya_097, ну вот у вас есть два блока - foo и bar. bar нужно вложить в foo. как это сделать?

можно так:

<div class="foo">

  <div class="foo__element">
    <div class="bar">
      <div class="bar__element"></div>
    </div>
  </div>
  
  <div class="foo__element">
    <div class="bar">
      <div class="bar__element"></div>
    </div>
  </div>
  
  <div class="foo__element">
    <div class="bar">
      <div class="bar__element"></div>
    </div>
  </div>
  
  <div class="foo__element">
    <div class="bar">
      <div class="bar__element"></div>
    </div>
  </div>
  
</div>

а можно использовать микс:

spoiler

<div class="foo">

  <div class="bar foo__element">
    <div class="bar__element"></div>
  </div>
  
  <div class="bar foo__element">
    <div class="bar__element"></div>
  </div>
  
  <div class="bar foo__element">
    <div class="bar__element"></div>
  </div>
  
  <div class="bar foo__element">
    <div class="bar__element"></div>
  </div>
  
</div>

с помощью миксов в некоторых случаях можно экономить теги