Как правильно по BEM создавать заголовки?

Question

[maitre]

Во время верстки по методологии BEM возникают вопросы как правильно называть заголовки и как их распределять по странице. Например, как грамотно их назвать в такой ситуации?

<div class="rate__starter">
	<h4 class="h4 rate__title">Package Pro</h4>
	<div class="h6 rate__price">$4.99</div>
	<div class="description rate__description">Make your life better</div>
</div>

.h1, .h2, .h3, .h4, .h5, .h6
	margin: 0
	color: #333
	font-weight: 300
	white-space: nowrap

.h4
	font-size: 30px

.h6
	text-transform: uppercase
	letter-spacing: 1px
	font-size: 12px
	font-weight: bold

.rate
       &__title
                border: 1px solid #D3D3D5
		border-radius: 20px
		width: 70px
		height: 30px
		line-height: 30px
		margin: 25px auto 40px auto

Тут я в .h4/.h6 сначала прописываю основные характеристики заголовка, а .rate__price отвечает у меня за позиционирование на странице (margin, padding). Такие танцы, потому что на странице в других секциях будут такие же заголовки и под каждый копировать свойства не норм. А писать что-то вроде .rate__title, .goods__title, .review__title, .footer__title { ... } не хочу, потому что использую SASS с его &__something.

Подскажите, пожалуйста, как правильно совместить тут заголовки и BEM
P.S. в конце код съехал и отображается некорректно, там все к title относится

Answer 1

[dom1n1k]

Сделать разные классы типа .rate__title, .goods__title, .review__title - нормально. Если у них есть общие свойства, их можно вытащить в миксин, оставив классы независимыми. Уверен, что у них будет что-то общее, но найдутся и различия. То есть совпадение не будет на 100%.

Впрочем, вариант с миксованием универсального "заголовочного" блока тоже вполне норм (если они действительно одинаковые). Я как-то делал класс .heading с модификаторами вида .heading--1, .heading--2 и пр. Потому что как это ни дико звучит - визуальный уровень заголовка не всегда совпадает с его семантическим уровнем.