入れ物（Container・Box）と内容物（Element、Component）の定義指針を定める

index.html


<header>
<img src="logo.png"/>
<button type="button">ログイン</button>
</header>

_header.scss


.g-header {
  display: flex;
  justify-content: space-around;
}

_nav-menu.scss


@use "config" as c;

.g-button {
  background-color: red;
  color: map-get(c.$color-set, "button-char-white");
}

備考(BEMの良さと疑問）

BEMの設計の良さは、ただグルーバルやカスケードによる定義の衝突や打ち消し、予期しない影響を抑えることにとどまらず、親と子、入れ物と要素を意識するところにもあると思う。
CSSの定義において、BEMの親子・入れ物と要素という視点はとても重要だと思います。
BEMの命名方法については、冗長すぎるため疑義があります。（グローバルprefix、小さい階層、直下セレクタを組みあわせることで冗長なセレクタにする必要はないと思います。）
BEMの命名法への疑義については、以下の記事でも指摘されています。
参考：BEM Is Terrible