Мы определяем на сервере и сразу отдаём common + desktop или common + phone

Медиа-запрос можно описать в самом теге <link type="stylesheet" media="…">, тогда он загрузит только подходящие стили

Вообще глобальные медиа-запросы - такое себе. При использовании компонентного подхода лучше работать с размерами отдельных компонентов. И в таком случае лучше использовать модификаторы, а не уровни переопределения.

Полностью не согласен — медиа-запросы прозрачно «передают» контекст, выделяя уровень абстракции. Мешать контекст в модификатор — такое себе.

а как эти модификаторы выглядеть будут?
типа

block—platform—mobile
block—platform—desktop

?

а хмм

Например, если блок имеет размер 300px, а экран 1200px, то глобальный медиа-запрос может расположить такой блок криво. Т.к. блок - независимый компонент, мы не можем заранее знать, в каком контексте он будет использоваться.

так если это некий уровень абстракции так я его могу вынести отдельно и для этого хорошо подойдут уровни переопределения?

block—platform—mobile
block—platform—desktop

block_width_xs, block_width_md ...

а разве блок не должен не иметь фиксированых размеров?

У блоков нет внешней геометрии, ширина всегда 100%

Как по мне, ширина/высота - это внутренние составляющие блока. Менять их можно, только если блок позволит: через модификаторы и css-переменные.

У вас — может быть, но в БЭМ такая договорённость (что у Блока не должно быть «внешней геометрии») неслучайна — это ограничение позволяет правильно композировать стили, чтобы их можно было использовать в любом контексте. Если нужно эмулировать контекст, то правильнее это делать меняя контекст (звучит как тавтология, но так и есть), например, явно задав view-port.

Ну и ещё вроде как на днях утвердили content-query

Есть блоки, которым нужны фиксированные размеры. Например, есть на сайте 3 блока - product (карточка товара), article (превью статьи), list (список произвольных элементов). Для product оптимальная ширина - 250px, а для article - 350px. Если растянуть их - будет уродство, сжать - их контент не поместиться. Мы заранее не знаем, что будет вложено в блок list, но мы можем создать для элементов ограничения по размерам, отступы и т.д..

Утвердили - круто. Теперь подождем пару лет, пока это будет всеми браузерами поддерживаться.

'''
.list_of_products .list__item {
 width: 250px
}

.list_of_articles .list__item {
 width: 350px
}
'''

И везде, где я захочу использовать product и article, мне задавать им эти размеры? А если, например, есть модификатор "article_format_wide", который меняет расположение элементов в блоке, и его оптимальный размер становится 500px?

так почему не задать ее в этом же модификаторе?

.list__item_format_wide {
 width: 500px
}