BEM css - 混合元素/修飾符

我有關於BEM結構的問題。混合元素/修飾符在語義上是否正確？我有一個英雄和投資組合模塊。我想在hero模塊中使用portfolio__item，但它應該使用hero__item的基礎樣式。這是做這件事的正確方法，是否允許混合這些元素？BEM css - 混合元素/修飾符

<section class="hero hero--collage hero--bottom-decoration">  
    <div class="portfolio__item hero__item hero__item--animated"> 
     <a href="http://www.google.nl"> 
      <div class="hero__hover"> 
       <span class="hero__hover__content h1">Hover title</span> 
      </div> 
      <img src="http://www.google.nl" class="hero__image"> 
     </a> 
    </div> 
</section> 


<section class="portfolio"> 
    <div class="portfolio__item"> 
     <a href="http://www.google.nl"> 
      <img src="http://www.google.nl" class="hero__image"> 
     </a> 
    </div> 
</section>

來源

2016-07-04 John McGuinnes

「是語義正確的混合元素/修飾」 - 我想你要放置hero塊內portfolio__item元素 - 這不是一件好事。您可以在塊中嵌套塊，但不能在另一個塊的元素中嵌入塊。

您可以使用修改器hero__item元素以爲像

<div class="hero__item hero__item--portfolio"></div>

這將改變它的風格。

來源

2016-07-07 12:21:11

的'portfolio__item'具有幾乎相同的造型爲'英雄 - 拼貼hero__item'。所以爲了避免重複的CSS，我想我可以在'hero - collage'裏面使用'portfolio__item'。擴展（我使用sass）從'portfolio__item'到'hero__item - portfolio'的樣式是最好的方法嗎？ –

如果你使用LESS/SASS，你可以創建一個像.virtual-1這樣的通用虛擬類，並使用它擴展另一個類，如： .hero - collage {0} {0} {0} {0} .virtual-1; //定製樣式 } .portfolio__item { .virtual-1; //定製樣式 } –

感謝您的評論，我瞭解擴展。但很多人不推薦使用擴展。但在這種情況下，我認爲沒關係，因爲幾乎所有的類都是在BEM結構下的根級。 –

你可以做任何你想做的事。但BEM方法說：

塊集命名空間

這是一個有點亂來閱讀。我一眼就看不懂它。 BEM的目標 - 單獨的塊因此您不需要再次寫入相同的塊。樣式也一樣。有了這個和修飾符，你可以重用和調整你需要的每個塊。

你可以因此，對「塊名」可以匹配樣式每個實例混合塊和元素

<img src="http://www.google.nl" class="block-name hero__image">

。在hero__image或其他元素上，你可以匹配獨特的風格。

不能創建元素

你不需要寫2個拉特的元素。你的塊集命名空間的原因名稱。

<span class="hero__hover__content h1">Hover title</span>

只是

<span class="hero__hover-content h1">Hover title</span>

文檔：https://en.bem.info/methodology/naming-convention/

來源

2016-07-17 19:33:29 Zentro

謝謝！我開始越來越多地看到BEM的優勢。起初，所有類名都有點「壓倒性」。 –

BEM css - 混合元素/修飾符

回答

相關問題