如何使用BEM正確設置元素的範圍？

鑑於以下BEM樹結構，設有五個嵌套級別存在：如何使用BEM正確設置元素的範圍？

collection-main__features-top__story__byline__author

根據BEM的命名約定，其中一個元素是塊的組成部分，它屬於，什麼是塊外沒有任何意義命名author類的正確方法？

由於一個author在語義綁在byline和story範圍內，但毫無意義下的features-top和collection-main塊，什麼是最好的BEM的名字嗎？

collection-main__author 
features-top__author 
story__author (best?) 
story__byline__author 
byline__author

如果引入新的features塊會發生什麼情況？

collection-main__features-top__story__byline__author (target) 
collection-main__features-bottom__story__byline__author 

features-top__story__author 
story--features-top__author (best?)

最後，如果另一collection塊被添加時會發生什麼，我們希望在樣式列表中的第二個author元素？

collection-main__features-top__story__byline__author 
collection-main__features-bottom__story__byline__author (target) 
collection-sub__features-top__story__byline__author 
collection-sub__features-bottom__story__byline__author

我們會這樣做嗎？

story--collection-main--features-bottom__author

必須有更好的選擇。

來源

2015-01-12 Eric Xu

請顯示您的數據輸出。是否像 '{collection-main：[{「feature-item」：{story：{author：''}}}]}'？ –

BEM禁止將元素放入CSS中的元素！
您在BEM標記中製作了最典型的錯誤 - 編寫了一個block__element__element。您必須創建新塊，而不是複製DOM樹。

例如：
右HTML：

<div class='block'> 
    <div class='block__elem1'> 
     <div class='block__elem2'></div> 
    </div> 
    <div class='block__elem3'></div> 
</div>

右CSS：

.block {} 
.block__elem1 {} 
.block__elem2 {} 
.block__elem3 {}

如果你需要做一個元素的元素，那麼你需要一個新的塊或用一個嵌套元素製作你的貝姆樹！

WRONG：

<div class='block'> 
    <div class='block__elem1'> 
     <div class='block__elem1__elem2'></div> 
    </div> 
</div>

RIGHT＃1：創建一個新的塊

<div class='block1'> 
    <div class='block2'> 
     <div class='block2__elem'></div> 
    </div> 
</div>

RIGHT＃2：請您BEM-樹一個嵌套元素

<div class='block'> 
    <div class='block__elem1'> 
     <div class='block__elem2'></div> 
    </div> 
</div>

注意 - 你不能將元素放入CSS中的元素，但你可以n並且應該將元素放入html元素中！ DOM樹和BEM樹可以不同。

不要寫出奇怪的名字，把元素名稱放在塊的名字中！

WRONG：

.block {} 
.block-elem1 {} 
.block-elem1__elem2 {}

因爲當您嘗試移動塊獲得奇數名稱的問題：

<div class='other-block'> 
    <div class='block-elem1'></div> 
</div>

嵌套的HTML元素是一個DOM樹。
您編寫的類的名稱是BEM樹。
感受不同！

DOM樹：

<ul> 
    <li> 
    <a> 
     <span></span> 
    </a> 
    </li> 
</ul> 

.ul {} 
.ul > li {} 
.ul > li > a {} 
.ul > li > a > span {}

BEM樹：

<ul class="menu"> 
    <li class="menu__item"> 
    <a class="menu__link"> 
     <span class="menu__text"></span> 
    </a> 
    </li> 
</ul> 

.menu {} 
.menu__item {} 
.menu__link {} 
.menu__text {}

參考文獻：

「的元件是一個塊的組成部分，不能使用在它之外。「 https://en.bem.info/methodology/key-concepts/#element

元素是塊的一部分！不是元素的一部分！讀維塔利Harisov，BEM-方法論作者：https://twitter.com/harisov/status/403421669974618112

類名，如「block__elem__elem___elem」是指編碼不明白在什麼BEM。

閱讀也：

有一個網絡會議WebCamp報告（俄羅斯）：前端開發人員日這個話題：https://www.youtube.com/watch?v=kBgHdSOj33A +幻燈片：http://ihorzenich.github.io/talks/2015/frontendweekend-bem/

來源

2015-01-12 11:07:12

另請參閱：http://www.sitepoint.com/working-bem-scale-advice-top-developers/ –

如何使用BEM正確設置元素的範圍？

回答

相關問題