2016-10-26 11 views
2

BEMで新しいコンテキストを開始するタイミングが少し不明です。BEM?ブロック内のブロック?

すべての子要素は常にブロック要素を参照する必要がありますか?

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>bem</title> 
    </head> 
    <body> 
     <div class="header"> 
      <div class="header__left"> 
       <!-- Left column content --> 
      </div> 
      <div class="header__search"> 
       <!-- Should this be attached to the header? Or a new context <div class="search"> as it can be used elsewhere on the site? --> 
      </div> 
     </div> 
    </body> 
</html> 

ここでの検索は、「ヘッダー」のdiv内にあるが、これは、サイト上の他の場所で使用することができて、私たちは本当にヘッダに添付する必要がありますか?

ブロック内に新しいブロックがありますか?

乾杯

+1

私はあなたの最高の推測の例を提供し、他の人にそれをコメントさせることをお勧めします。あなたがここで尋ねたことはあまりにも曖昧だと思います。 –

答えて

7

それは重複ブロックに問題がない私の理解は、限り、CSSは、各ブロックを標的とするために使用されていると控えめと分離しているのです。したがって、searchスタイリングは、他の場所で使用できる場合はheaderスタイリングに依存しないようにしてください。同様に、headerスタイリングは、子どもとの関連性が失われても、さらに下に行く必要はありません。

この作品のようなものでしょうか。それは理にかなっていますか?

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>bem</title> 
    </head> 
    <body> 
     <div class="header"> 
      <div class="header__left"> 
       <!-- Left column content --> 
      </div> 
      <div class="header__right"> 
       <div class="search"> 
        <input class="search__input> 
        <button class="search__button>GO!</button> 
       </div> 
      </div> 
     </div> 
    </body> 
</html> 
+0

それはまさに私が思っていたものです..歓声! –

関連する問題