Как правильно оформить блок по БЭМ?

Question

[Сергей Горячев]

Есть простой код:

<!-- slider -->
<aside class="slider">
    <div class="wrapper">
        <!-- slider-title -->
        <div class="slider-title">
            <h2>Натяжные потолки</h2>
            <h3>Установка качественных и долговечных потолков по отличным ценам</h3>
        </div>
        <!-- /slider-title -->
    </div>
</aside>
<!-- /slider -->

Собственно, 2 блока slider и slider-title. Да, это именно блоки будут. Потому как это только часть кода.

И как же правильно подойти к оформлению CSS:

Вариант 1:

<div class="slider-title">
    <h2>Натяжные потолки</h2>
    <h3>Установка качественных и долговечных потолков по отличным ценам</h3>
</div>
.slider-title {
    h2 {}
    h3 {}
}

или правильным будет Вариант 2:

<div class="slider-title">
    <h2 class="slider-title__h2">Натяжные потолки</h2>
    <h3 class="slider-title__h3">Установка качественных и долговечных потолков по отличным ценам</h3>
</div>
.slider-title {
    &__h2 {}
    &__h2 {}
}

То есть требуется ли указание класса для h2 и h3, которые итак будут иметь только свои стили и никак нигде не повторятся?

Answer 1

[Edward]

Второй вариант правильный.
По БЭМ, в идеале, не должно быть никаких селекторов, только классы и минимум каскадов.

Как работать с CSS-препроцессорами и БЭМ

Comments

[Сергей Горячев]

Спасибо за ссылку, вы обеспечили мне несколько дней изучения :)))

[Edward]

Sergey Goryachev: Всегда пожалуйста, изучайте на здоровье :)

[Сергей Горячев]

Edward: А такой вопрос, по этой документации модификатор оформляется "--", однако везде в других местах "_", в чем подвох?)

[Edward]

Sergey Goryachev: Это немного измененная система именования классов, в соответствии с предложениями Николаса Галлахера, мне, например, она тоже больше нравится, чем оригинальная. Вот вам еще на несколько дней ))) : Головокружительное погружение в БЭМ.

[Сергей Горячев]

Edward: Одна фраза меня очень сильно порадовала "Код БЭМ страшный и некрасивый". Я на самом деле полагал, что просто я его пытаюсь готовить неправильно и он призван сократить код. Однако эти статьи и еще одна по ссылке нашел сам, поставили всё на места. БЭМ интересен на самом деле, хотя да, больше писать приходится. Но малейшие модификации кода, а тем более другим разработчиком занимают минимум времени. Это я на себе проверил, когда мне достался сайт коллеги.

[Edward]

Sergey Goryachev: Все так и есть )

[dom1n1k]

Sergey Goryachev: два дефиса пришли с Запада и мне тоже эта манера больше нравится - нагляднее.