BEM記法とは？Bootstrapとの併用は難しい・・・[初心者]

初めに

ポートフォリオ制作でBEM記法を取り入れていきたいと思いましたが... Bootstrapを導入しているため、出来そうにないということに気づきました。 （BEM記法に触れていないレベルで、Bootstrapとの併用は高度すぎるように感じました）

色々調べて自分なりに理解したことをまとめていきます。

BEM記法って何？

CSSの命名規則。BEM記法にのっとり、記述すればココはあそこの記述ね！というのが自分以外の人が見ても、わかりやすい。
ただし、コードが長くなりがち。
B:Block　（ブロック）でっかい括り
E:Element（エレメント） でっかい括りの中の要素
M:Modifier（モディファイアー・修飾語という意味） 上記２つの変化球　とのこと。

この順番でクラス名を決めていくらしい。（block_element--modifireのように）

実際にどう記述するのか

<button type="button" class="form__btn">送信</button>
<button type="button" class="form__btn form__btn--disabled">送信</button>

<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item"><a href="">menu</a></li>
  </ul>
</nav>

ここで気付く...

Bootstrapでは、"btn btn-primary"や、"nav navbar"とか書いて、ボタンやら、ナビゲーションバーを表示していました。もしここにBEM記法のクラス名を導入したら... かなり長くゴチャゴチャになってしまうのでは....?????

BEM記法とBootstrapは併用できるのか？

相性が悪いというのはやはりあるらしい。

考えたこと

Bootstrap使うところは、Bootstrapの命名規則に従って、Bootstap使わないところはBEM記法で書くのはどうだろうか？？

一つの Web システム内に2つの命名規則が混在してしまうことになる...ややこしい・・・

こうすれば綺麗に併用できるらしい

正直、今のレベルで...ポートフォリオ制作期限もある中で...自身のポートフォリオでBEM記法とBootstapをうまく併用するのは無理だと感じました。

BEM記法について　参考にした記事

https://tech-dig.jp/bem-css-html/

以上です。