2017-06-07 13 views
0

このHTML構造には疑問があります。 BEMのアプローチでは正しいですか?私の心にBEM方法論適切なHTML構造

<div class="boxWithBorder"> 
    <div class="header"> 
    <h2 class="boxWithBorder__element"></h2> 
    </div> 
</div> 

それがカプセル化された要素を保持してどのようなこと

<div class="boxWithBorder"> 
    <div class="header"> 
    <h2 class="header__element"></h2> 
    </div> 
</div> 

のようになります。

+1

block1とblock2とは何ですか?あなたは何をしようとしているのではなく、実際のケースのシナリオを使用できますか? –

+0

あなたはおそらく正しいですが、 'block1'は意味論ではないとすれば、誰が言うことができますか?あなたがBEMを完全に避けることができれば、それは私の経験ではもっと簡単になります。 BEMは、CSS回避という名前のHTMLによる汚染です(カスケードの競合を避ける)。 CSSを理解していないアプリケーション開発者は、このばかげたスタイルでHTMLを作成することに感謝しません。 –

+0

@ Dejan.S BEMブロック1およびブロック2によると、機能的に独立したページコンポーネントは再利用できますか?したがって、それがnavおよびsearch_boxまたはその他のものであるかどうかは、あなた次第です。私は一般的には、block2の中に** block1__element **を置くのが正しいのか知りたいのですか? 私の2番目のコードを見てください。 – FeDev

答えて

0

一般的に私たちはコンポーネントと構造をしています。つまり、構造はコンポーネントの構成です。それは部分が大丈夫であるようにネスティングする必要があります。あなたの最初のアプローチでは、私たちの基準でOKではなく、使用されていません。 block1はblock2内には生きてはいけませんが、block2は入れ子になっているのでblock1の中になければなりません。意味がありますか? BTW BEMは使用するのに完璧にいいですし、多くのフロントエンドの開発者がそれをやっています。大物も同様に、csswizardry.comをチェックしてください。彼はBEMに関する素晴らしい記事を手に入れました。

また、BEM html/css)はcamleCaseをスキップし、代わりに " - "を使用します。

<div class="box-with-border"> 
    <div class="header"> 
    <h2 class="header__element"></h2> 
    </div> 
</div> 


<div class="hero hero--red-with-border"> 
    <h1 class="hero__title>Title...</h1> 
    <p class="hero__body-text">Text...</p> 
</div> 
関連する問題