BEM：列出項目和樣式？

HTML

<header class="header"> 
    <div class="header__branding"> 
    <h1>Site branding</h1> 
    </div> 
    <div class="header__menu"> 
    <nav class="main-menu"> 
     <ul class="main-menu list"> 
     <li class="list__item"><a href="" class="list__item-link">link</a></li> 
     <li class="list__item"><a href="" class="list__item-link--active">link</a></li> 
     <li class="list__item"><a href="" class="list__item-link">link</a></li> 
     </ul> 
    </nav> 
    </div> 
</header> 

<footer class="footer"> 
    <div class="footer__links"> 
    <ul class="???? list"> 
     <li class="list__item"><a href="" class="list__item-link">link</a></li> 
     <li class="list__item"><a href="" class="list__item-link">link</a></li> 
     <li class="list__item"><a href="" class="list__item-link">link</a></li> 
    </ul> 
    </div> 
</footer>

CSS

.main-menu .list{ 
    // styles here 
} 

.list__item{ 
    // styles here 
} 

.list__item-link{ 
    // styles here 
} 

.list__item-link--active{ 
    // styles here 
}

所以我的問題是，什麼是名稱的最好方式列表以及如何最好地組織CSS？我被困在頁腳中，我添加了一個？如果有人能幫我想一個更好的頁腳鏈接名稱？

我發現很難把我的頭圍繞BEM，但是我不應該在一次嵌套多個元素嗎？

來源

2017-03-26 user5898548

認爲BEM是可重複使用的組件，可以在不同的地方在現場多次放置。

在這種情況下，你只需要'列表'中不需要任何類。無論是在頁眉和頁腳。

如果您需要任何修改，可以使用如下所示的'list list - wide'左右。而這第二個類只改變元素的寬度。

還有一個：list__item-link是錯誤的。父母是'list__item'，所以這應該被命名爲'list__item__link'，但是你也可以將其命名爲'錨'或'鏈接'，你將能夠重複使用它們在網站上的所有網站上的<a>元素。

來源

2017-03-26 19:00:54 Ula

謝謝你Ula！是的，我明白你的意思了，我想對BEM來說是新手，我只想瘋狂地嘗試上課。所以只需確認一下，它就會被CSS樣式化爲：.main-menu .list和.footer .list？我使用Scss，但不喜歡嵌套。 – user5898548

是的，BEM第一眼就非常煩人！我一直在那裏:)，但是當css獲得更多的代碼行時，它會更有意義。 – Ula

是的，告訴我吧！ :)我只是更加困惑人們如何展示如何嵌套，但我會給可重用組件更通用的類然後。我是否也需要爲所有我的元素（如h1和span類）提供類，即使他們沒有任何css？再次感謝Ula。 – user5898548

BEM：列出項目和樣式？

回答

相關問題