@Zuckerberg

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

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

Есть вот такая секция в макете
5d6f91cf441af039028610.jpeg

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

Так (заголовок отдельно, а параграфы объединены)
<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 ?
  • Вопрос задан
  • 98 просмотров
Решения вопроса 3
mroforolhc
@mroforolhc
умственно отсталый
БЭМ - это всего лишь методология, нет строгих правил, но есть концепция "блок - элемент - модификатор". А дальше всё на усмотрение верстальщика, в зависимости от того, как он видит блоки. И так, и так будет верно.

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

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


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы