Как вы в БЭМе используете повторяющиеся текстовые элементы?

Question

[Максим]

Допустим есть сайт, в котором есть куча разных блоков/секций и во всех них имеются одинаковые тайтлы, сабтайтлы, текстовые блоки, ссылки и так далее. Эти элементы порой отличаются лишь размером шрифта или цветом.
Пока делаю для каждого блока/секции свой &__title, &__text, &__link, и если надо вариации в плане стилей, то к ним же приставляю модификаторы.
Но это всё нарушает принцип DRY, так как приходится повторять один и тот же код. На этот случай я стал использовать scss placeholders (но думаю отказаться от них и перейти на миксины, пока спорный момент).
Всё ли правильно делаю? Была ещё идея просто каждый такой текстовый элемент сделать независимым блоком/компонентом и вставлять его в разные блоки/секции, но вроде так делать не канон.

Comments

[Realetive]

Прикрепите картинку с дизайном — так будет проще понять, какую проблему вы решаете. Но вообще очень похоже, что вам просто нужно сделать БЭМ-микс ваших элементов с блоками, отвечающими за заголовки.

[Максим]

Realetive, микс - это костыль на мой взгляд. Стоит только лишь в css не в том порядке задать блоки и миксы, и всё сломается.

[Realetive]

Максим, если вы не можете гарантировать порядок подключения классов в CSS, то почему сразу костыль? Каскадность — это ключевая парадигма CSS, вопрос в том, умеете ли вы её контролировать (и как вы это делаете). В БЭМ-стеке этой проблемы не возникает — там каждый блок/элемент «знает», какие стили ему нужно (если нужно) перекрыть, поэтому он подключается позже (при этом сохраняя специфичность на уровне «плоской» вложенности).

Answer 1

[Сергей delphinpro]

<div class="block1">
    <div class="block1__title title">Title</div>
</div>
<div class="block2">
    <div class="block2__title title">Title</div>
</div>
<div class="block3">
    <div class="block3__title title title_size_large">Title</div>
</div>
<div class="block3 block3_theme_dark">
    <div class="block3__title block3__title_inverse title">Title</div>
</div>

Comments

[Максим]

кстати, почему вместо -- используется _ в модификаторах?

[Сергей delphinpro]

Максим, Это классика. Это удобно (поддерживается без доп настроек редакторами и различными тулзами). Это дает больше возможностей — параметр=значение

[Максим]

Сергей delphinpro, понял
значит всё таки решение это микс

Answer 2

[Andrew]

одинаковые тайтлы, сабтайтлы, текстовые блоки, ссылки и так далее

отличаются лишь размером шрифта или цветом

Эм, а чем еще могут отличаться текстовые элементы?
Сделайте миксин с дефолтным, наиболее часто встречающимся атрибутами и используйте

Comments

[Максим]

могут отличаться много чем:
1) letter spacing
2) font-weight
и тд

сам как раз думаю именно в сторону миксина

[Andrew]

Максим,
расстояние между символами и жирность, для меня, это всё входит в "размер шрифта"