與嵌套的Bem類混淆

我有一個帶嵌套類的標頭。我怎樣才能寫出類名？與嵌套的Bem類混淆

下面是否正確？

<header class="header"> 
    <nav class="header__navbar"></nav> 
    <div class="header__search__btn"> 
     <a href="#" class="header__search__btn__link"></a> 
    </div> 
    <div class="header__search__wrapper"> 
     <form class="header__search__wrapper__form"></form> 
    </div> 
    <div class="header__logo"></div> 
</header>

來源

2015-07-03 ialhamad

我從來沒有聽說過BEM，但如果這是它如何禁止類名，我不喜歡它。這不是類名應該做的。 –

@MrLister不，這不是它的工作方式，而是'__'是一個重要部分，每個類名應該只有一個 - 很值得一看，一旦你得到任何主觀的「它很醜」類型迴應，例如那些我:-) –

不是。

你是正確的，你應該用你的__元素分離出來的塊，但你不應該然後再在同一個班級使用__一旦你做到了。如果您需要使用多個單詞，請使用單個連字符，例如header__affiliate-logos。

讓我們看一下例子清理了一下：

<header class="header"> 
    <nav class="header__navbar"></nav> 
    <div class="header__search search"> 
     <form class="search__form"></form> 
     <a href="#" class="search__link"></a> 
    </div> 
    <div class="header__logo"></div> 
</header>

這是怎麼發生的事情是，header塊已經有所降低，包括僅在邏輯上屬於頭班，而search塊已分離出它自己的BEM模塊。

結果是這些類更加簡潔和有意義，並且實際上您有一個完全可重用的search模塊，該模塊與該站點的標題無關。

要設置搜索風格，您需要將通用搜索樣式放入模塊中，可能包括鏈接的顏色或搜索輸入的大小。然後你可以在你的更具體的header__search中給它標題相關的上下文，也許根據設計將它定位在正確的位置。

如果可能在BEM模塊中避免所有上下文，特別是在任何通用塊中，通常最好避免使用，因此search塊可能只是小型的。

CSS Wizardry - MindBEMding

CSS Wizardry - an article with more about context and examples

注意，它在技術上並不需要包括他們的父母中的所有搜索元素，但它確實使更有意義這樣做。

來源

2015-07-03 21:45:52

與嵌套的Bem類混淆

回答

相關問題