BEM css - 要素/修飾子の組み合わせ

Question

BEMの構造に関する質問があります。要素/修飾子を組み合わせるのは意味上正しいですか？私はヒーローとポートフォリオモジュールを持っています。ヒーローモジュールでportfolio__itemを使用したいのですが、hero__itemの基本スタイルを使用する必要があります。これを行う正しい方法ですか、これらの要素を混在させることは許されていますか？私はあなたがheroブロック内portfolio__item要素を配置するとします - - それは良いことではありません

<section class="hero hero--collage hero--bottom-decoration">  
    <div class="portfolio__item hero__item hero__item--animated"> 
     <a href="http://www.google.nl"> 
      <div class="hero__hover"> 
       <span class="hero__hover__content h1">Hover title</span> 
      </div> 
      <img src="http://www.google.nl" class="hero__image"> 
     </a> 
    </div> 
</section> 


<section class="portfolio"> 
    <div class="portfolio__item"> 
     <a href="http://www.google.nl"> 
      <img src="http://www.google.nl" class="hero__image"> 
     </a> 
    </div> 
</section> 

Answer 1

は、「それは意味的に正しい要素/修飾子を混合することです」。あるブロック内のブロックをネストすることはできますが、別のブロックの要素内のブロックの要素はネストすることはできません。あなたがhero__item要素に修飾子を使用することができます

はそれのスタイルを変更します

<div class="hero__item hero__item--portfolio"></div> 

のように思いました。

Answer 2

あなたは何でもできます。しかし、BEMの方法論は言う：

ブロックセットの名前空間

それは、これを読むには少し厄介です。 一目で理解できません。 BEM-のブロックは別々のブロックのため、同じブロックを再度書き込む必要はありません。スタイルも同じです。この修飾子を使用すると、必要なすべてのブロックを再利用して調整することができます。

あなたはすべてのインスタンスのスタイルを一致させることができますブロックと要素「ブロック名」に関するので

<img src="http://www.google.nl" class="block-name hero__image"> 

を混在させることができます。ヒーローイメージや別の要素では、ユニークなスタイルにマッチすることができます。

あなたは2つのLVLを書く必要はありません要素

の要素を作成することはできません。ブロックセット名前空間の名前。

<span class="hero__hover__content h1">Hover title</span> 

だけ

<span class="hero__hover-content h1">Hover title</span> 

---

ドキュメント：https://en.bem.info/methodology/naming-convention/