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 - 混合元素/修饰符

回答

相关问题