Еще можно в стилях указывать разные значения для одного и того же модификатора для разных MQ.

Это будет не совсем правильно, так как тогда сущность будет менять состояние тогда, когда этого не нужно. На примере выше, если я хочу, чтобы small менялось на разрешении > 1280px на medium и укажу MQ у small, то все мои small будут модифицироваться в medium, когда как мне нужно такое поведение только в конкретных случаях, а то есть small должен оставаться small на всех разрешениях.

Если на необходимость учитывать MQ влияет контекст, то можно из него и исходить: примиксовать к таким компанентам дополнительные элементы (либо применить вложенные селекторы, если это оправданно), которые и будут задавать размеры в зависимости от разрешения.

Контекстом разве что может быть сама страница. Изменение кнопки происходит по UI Kit'у (из small в medium) и не хотелось бы как-то привязывать это к миксованию. Как я понял предлагается вариант, что если у нас есть кнопка

<style>
.button { ... }
.button_small { padding: 20px;  font-size: 16px; }
.button_medium { padding: 40px;  font-size: 18px; }
</style>

<button class="button button_small">Кнопка</button>

И мы хотим, чтобы на разрешении > 1280px он был не button_small, а button_medium, мы должны задать стилизацию button_medium через микс, к примеру:

<style>
.button { ... }
.button_small { padding: 20px;  font-size: 16px; }
.button_medium { padding: 40px;  font-size: 18px; }

.context__button { @media (min-width: 1280px) { padding: 40px;  font-size: 18px; } }
</style>

<button class="button button_small context__button">Кнопка</button>

Так, кажется, нагляднее:

<style>
.button { ... }
.button_small { padding: 20px;  font-size: 16px; }
.button_medium { padding: 40px;  font-size: 18px; }

.button_medium@lg { @media (min-width: 1280px) { padding: 40px;  font-size: 18px; } }
</style>

<button class="button button_small button_medium@lg">Кнопка</button>

Костыль ли это? Возможно :)

Еще можно в стилях указывать разные значения для одного и того же модификатора для разных MQ.

Это будет не совсем правильно, так как тогда сущность будет менять состояние

Я не согласен в этим тезисом сразу в двух местах.

1. Состоянием small назвать сложно, потому что эта кнопка ни при каких обстоятельствах не может стать не small. Даже если у неё должен быть другой размер шрифта.
2. Саму кнопку не надо делать _medium, потому что тогда это будет другая кнопка, правильнее подстраиваться под устройство вывода, считая (учитывая, что пользователь в 99% случаях не делает ресайз окна), что viewport имеет те размеры, в которых пользователю будет комфортно работать с сайтом.

В общем, это mq для очень мелких/крупных экранов это единственно правильное решение, и лучше всего стремиться именно к нему. Всё остальное костыли.

Если говорить про кнопки, то лучше, чтобы они все были одного размера, и не было giant-button, micro-button, и всей этой ереси.

Если вам хочется, чтобы пользователи в некоторые кнопки попадали с трудом, а в другие — с комфортом, то сделайте для первых модификатор _size_uncomfortable и задайте жестко высоту 36px или меньше, а для второй сделайте _size_comfortable и задайте высоту 36px для мышки, 44px для тачей (через mq(width < 1024px)), и вторым пользуйтесь, когда кнопка должна быть адаптивной, а первым — когда нет.

p.s. See also: https://ux.stackexchange.com/questions/39023/what-is-the-optimum-button-size-of-touch-screen-applications

Если говорить про кнопки, то лучше, чтобы они все были одного размера, и не было giant-button, micro-button, и всей этой ереси.

Если говорить не про адаптивный подход, то более менее с этим согласен, иначе этого не избежать.

Хотим сейчас подстраиваться под вьюпорт: учитывая размер устройства грузить разный лэйаут.

Если вам хочется, чтобы пользователи в некоторые кнопки попадали с трудом, а в другие — с комфортом, то сделайте для первых модификатор _size_uncomfortable и задайте жестко высоту 36px или меньше, а для второй сделайте _size_comfortable и задайте высоту 36px для мышки, 44px для тачей (через mq(width < 1024px)), и вторым пользуйтесь, когда кнопка должна быть адаптивной, а первым — когда нет.

Это подойдет тогда, когда кнопка по UI киту только одного размера, а если же разная, то это либо мерж CSS'ом (button_size_medium.button_size_comfortable), либо создание button_size_medium-comfortable, что равносильно подходу button_medium@lg.