Оба варианта ок.

В случае обвешивания красотами элемента list у teaser вы описываете внешние особенности блока teaser и его элемента. В случае создания модификатора у блока list — рюшечки для блока list.

Тут надо понять что именно вам хочется, и тогда будет понятно какой способ лучше для вашего конкретного случая ;-)

upd: честно говоря, list__text-size_18 выглядит не очень. если уж на то пошло — то лучше намиксовать туда какой-нибудь text с модификатором text_font-size_18.

Отличный вопрос @ogonkov :+1:

Есть пара моментов, я не то что бы придираюсь, просто хочу понять тонкости момента.

Условие такое есть блок list и teaser:

.list { font-size: 14px; }
.teaser { }

Задача использовать list в teaser с размером шрифта размером шрифта 18px.

Первый вариант, если я правильно понял, использовать list в элементе teaser__list, я знаю два варианта микс и обертка:

{
    block : 'teaser',
    content : {
        elem : 'list',
        content : [
            'i am element <b>teaser__list</b> use <b>list</b>',
            {
                block : 'list',
                content : 'i am block <b>list</b>'
            }
        ]
    }
},
{
    block : 'teaser',
    content : {
        elem : 'list',
        mix: { block : 'list' },
        content : 'i am element <b>teaser__list</b> mix <b>list</b>'
    }
}

<div class="teaser">
    <div class="teaser__list">i am element <b>teaser__list</b> use <b>list</b>
        <div class="list">i am block <b>list</b></div>
    </div>
</div>
<div class="teaser">
    <div class="teaser__list list">i am element <b>teaser__list</b> mix <b>list</b></div>
</div>

Учитывая то что блок независимая сущность в случае обертки у list размер шрифта останется без изменений и изменится в при миксе.

Если мы хотим использовать обертку надо добавить модификацию блока list и чтобы остаться на светлой стороне и не болеть классянкой (list__text-size_18, text_font-size_18), надо ответить себе на вопрос зачем, вот пара из множества вариантов:

Необходимо иметь реализацию блока list где все будет больше, БЭМ:

{
    block : 'teaser',
    content : {
        elem : 'list',
        content : [
            'i am element <b>teaser__list</b> use <b>list</b>',
            {
                block : 'list',
                mods: { size : 'big' },
                content : 'i am block <b>list</b> <i>big size</i>'
            },
        ]
    }
},
{
    block : 'teaser',
    content : {
        elem : 'list',
        content : [
            'i am element <b>teaser__list</b> use <b>list</b>',
            {
                block : 'list',
                mods: { big : true },
                content : 'i am block <b>list</b> <i>big</i>'
            },
        ]
    }
}

<div class="teaser">
    <div class="teaser__list">i am element <b>teaser__list</b> use <b>list</b>
        <div class="list list_size_big">i am block <b>list</b> <i>big size</i></div>
    </div>
</div>
<div class="teaser">
    <div class="teaser__list">i am element <b>teaser__list</b> use <b>list</b>
        <div class="list list_big">i am block <b>list</b> <i>big</i></div>
    </div>
</div>

Исключительно для блока teaser надо для list увеличить шрифт, БЭМ:

.teaser .list {
    font-size: 18px;
}

Методология не запрещает делать каскад, если знаешь что делаешь и зачем.

Получается вопрос наследования CSS правил это вопрос не к БЭМ, а к CSS.

Еще пара моментов, по классическому наименованию list__text-size_18 = { block : 'list', content : { elem: 'text', elemMods: { 18: true } content: 'bar' } } булев модификатор 18 элемента text-size блока list...мм ... получается как то неаккуратненько.

Для себя понял надо научится думать интерфейсом, а не стилем чтобы извлечь максимум из методологии БЭМ.

честно говоря, list__text-size_18 выглядит не очень. если уж на то пошло — то лучше намиксовать туда какой-нибудь text с модификатором text_font-size_18.

@zxqfox скажи, ты серьезно думаешь это лучше?

@ilyar я помню было время люди делали так:

.font-size_15 { font-size: 15px; }
.color_red { color: red }
.clear { clear: both; }

list_text-size_18 такое же, оно не описывает стилей в рамках семантики, и не отличается от attrs: { style: "color: red; font-size: 15px; }, но еще и привязано к лист — это значит у нас будет по классу для каждого блока/элемента. Это разве хорошо? явно нет.

@zxqfox тогда я тебя не понял совсем

@ilyar я о том, что list__teaser намного лучше, чем list_font-size_15px ;-)

Представь на секунду, что у тебя будут шаблоны собираться под ios и андроид с разными экранами. И тогда твой экран, который собирается и под браузеры, и под приложения, будет содержать mods: { 'font-size': '15px' } в bemjson. Каким образом надо будет стили описывать? Получится как-то так: _font-size_15px { font-size: 2rem; }. А логику поведения как к этому цеплять? Тоже непонятно.

На сайте GetBEM как раз появился ответ на вопрос, чем плохо модификаторы типа font-size_18. http://getbem.com/faq/#css-modifier-names