Kater-auf-Dach

Foundation более гибок, его попроще использовать для семантической верстки, о чем хорошо написано в документации:

.container {
  @include grid-row;
}
.main-content {
  // Use a custom fraction (20%)
  @include grid-column(1 of 5);
}

И еще. 6я версия позволяет делать сетку как раз на флексах

Слишком много подводных камней при совершенно не очевидном (до полного отсутствия) профите.
Куда интереснее в этом плане смотрится методология AMCSS от Глена Маддерна. Хотя и там немало проблем.

Хотя решение есть и довольно давно, немного уточню и подправлю сам вопрос - если кто еще задается таким вопросом.
Строго говоря, в оригинальной нотации БЭМ класс.menu_item_active {} будет выглядеть как .menu__item_state_active {}.
Это случай модификатора типа «ключ — значение», полное имя которого создается по схеме:
block-name__elem-name_mod-name_mod-val.
Поэтому не btn_big_red, а btn_color_red и btn_size_big, то есть тут уже 2 модификатора.
Подробнее - в соглашении по именованию, в самом низу также есть раздел "Альтернативные наименования"

Хмм... Вроде все нормально, закруглений нет:
раз, два

Можно фоновым изображением, можно через псевдоэлемент ::after

Можете посмотреть еще библиотечку Hover - в разделе Border Transitions есть нечто похожее, но надо допиливать