Как давать классы, если большая вложенность?

Question

[Денис Сопко]

Всегда была проблема с наименованиями блоков. Как поступить в данной ситуации? Мне нужно сделать секцию "Сервисы", в которой присутствует 3 блока, как раз, этих сервисов.

На HTML коде, эти 3 блока я обернул еще в один и назвал его "services-blocks",а элементы (блоки) основного блока я назвал "services-block" (то есть, основной называется "Сервис-блоки",а дети этого блока "Сервис-блок"). Как дальше быть?
Как называть картинку, заголовок этого блока, описание его...? И правильно ли я вообще сделал до этого момента (методология БЭМ)?

Answer 1

[Даниил Маслов]

Лучше всего прочитать официальную документацию, в ней всё понятно написано.

Я бы сделал следующим образом:

<section class="services-list">
  <h2 class="content-title services-list__title">Awesome services</h2>
  <article class="services-item">
    <img class="services-item__img" src="#" alt="">
    <h3 class="services-item__title">Express Services</h3>
    <p class="services-item__desc">Lorem ipsum.</p>
    <a class="services-item__link" href="#">Read more</a>
  </article>
</section>

P.S Всегда выкладывайте код текстом. Целесообразность clearfix не совсем ясна, ведь можно сделать сетку на flexbox.

Answer 2

[Шохрух Шаймардонов]

Почитайте эту статью, возможно оттуда словите идею)