Обязательно ли группировать заголовок с параграфами?

Question

[Zuckerberg]

Дайте напутствие дилетанту, как верно сверстать блоки. Верстаю совсем недавно и заостряю внимание на каждом моменте, думая - "может так, а может так сверстать".

Есть вот такая секция в макете


Путаюсь сразу верстать по БЭМ, хоть и не до конца ещё его понял. Вот встал вопрос, как лучше сверстать:

Так (заголовок отдельно, а параграфы объединены)

<section class="works">
    <div class="wrap text-center">
        <h2 class="works__title">Реализованные проекты</h2>
        <div class="works__desc">
            <p>Коммуникационное агентство – часть многофункционального холдинга, объединяющего различные компании на территории России и ближнего зарубежья.</p>
            <p>Наши подходы к организации бизнеса и имеющиеся ресурсы позволяют одинаково эффективно обеспечивать реализацию как крупномасштабных федеральных или международных проектов, так и решать небольшие локальные задачи. Мы находимся в постоянном развитии, расширяя и укрепляя имеющиеся бизнес-направления, а также формируя новые.</p>
        </div>
    </div>
</section>

Либо так (всё вместе- и заголовок и параграфы)

<section class="works">
    <div class="wrap text-center">
        <div class="works__desc">
            <h2 class="works__title">Реализованные проекты</h2>
            <p>Коммуникационное агентство – часть многофункционального холдинга, объединяющего различные компании на территории России и ближнего зарубежья.</p>
            <p>Наши подходы к организации бизнеса и имеющиеся ресурсы позволяют одинаково эффективно обеспечивать реализацию как крупномасштабных федеральных или международных проектов, так и решать небольшие локальные задачи. Мы находимся в постоянном развитии, расширяя и укрепляя имеющиеся бизнес-направления, а также формируя новые.</p>
        </div>
    </div>
</section>

Заодно подскажите, правильно ли сделано по БЭМ, особенно во втором случае - нужно ли там .works__desc делать как отдельный блок или можно оставить как элемент секции .works ?

Comments

[Rustam Bainazarov]

Никакой разницы. Лично мне нравится первый вариант, он логичнее, т. к. блок описания может содержать не только параграфы текста.

[Zuckerberg]

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

[Rustam Bainazarov]

Zuckerberg, тем паче первый вариант лучше. Но это больше вопрос дизайна, чем BEM. Он ничего не предлагает касательно таких вопросов.

Answer 1

[Yan Markov]

БЭМ - это всего лишь методология, нет строгих правил, но есть концепция "блок - элемент - модификатор". А дальше всё на усмотрение верстальщика, в зависимости от того, как он видит блоки. И так, и так будет верно.

UPD: прочитав ответы других пользователей, хочется ещё раз добавить, что это все рекомендации. Ответы даны с упором на то, как сделали бы они. Если вы сделаете по-своему – никто вас ругать не будет.
Пишу это, держа в уме то, что вы новичок и любой совет может трактоваться как строгое правило. Хотелось бы добавить, что это не так.

Comments

[Zuckerberg]

Yan Markov, спасибо, буду это держать в уме ... на самом деле сейчас всё воспринимается как определенный набор стандартов )

Answer 2

[Одиночка Айс]

У вас есть блок, у которого есть заголовок и описание, это две разные сущности, значит их нужно разделять.

Answer 3

[Иван В]

Предлагаю третий вариант:

<section class="works">
    <div class="..."> <!-- здесь объедините свойства "wrap text-center" и "works__desc" -->
         <h2 class="works__title">Реализованные проекты</h2>
         <p>Коммуникационное агентство – часть многофункционального холдинга, объединяющего различные компании на территории России и ближнего зарубежья.</p>
         <p>Наши подходы к организации бизнеса и имеющиеся ресурсы позволяют одинаково эффективно обеспечивать реализацию как крупномасштабных федеральных или международных проектов, так и решать небольшие локальные задачи. Мы находимся в постоянном развитии, расширяя и укрепляя имеющиеся бизнес-направления, а также формируя новые.</p>
    </div>
</section>

В вашем втором варианте явно лишне делать два div'а "обертки" для текста.
Группировать текст нужно, например, если вы хотите этот текст каким-либо образом позиционировать или, например, ограничить длинну. "Оборачивать" в div ради самого оборачивания не имеет смысла.

Comments

[Zuckerberg]

Иван В, да тут этот момент я не пояснил, но там именно ограничивается длина параграфов. Снизу не видно, но там идет блок изображений шириной 1650 - это мой wrap, а параграфы я ограничиваю через works__desc. И предполагалось, что от этого works__desc будет отступ снизу, чтобы сделать расстояние до блока изображений )