BEM CSS 块或修改器

Question

我正在尝试采用 BEM CSS 并拥有一个组件，但我想要块级别的大小版本。

我不确定什么应该是块或什么应该是修饰符。因为那时我需要两个块，这违背了制作组件的目的。现在我的元素现在是修饰符，而它们应该只是小元素或大元素。

<div class="c-sales c-sales__small p3">
   <p class="c-sales__small--headlead">Limited time only</p>
   <h1 class="c-sales__small--heading">FIRST 2 MONTHS <span style="color:#00ce7d;">FREE!</span></h1>
   <h2 class="c-sales__small--subheading pt2">Only in September</h2>
   <p class="c-sales__small--details">this is some text</p>
 </div>

Answer 1

c-sales 显然是块。您的元素是：

c-sales__headlead

c-sales__heading

c-sales__subheading

c-sales__details.

现在，对于修饰符，您有两个选择。第一个，最符合 BEM 的，是为实际上与基本版本不同的所有元素创建修饰符，因此您最终可能会得到：

c-sales

c-sales__headlead c-sales__headlead--small

c-sales__heading c-sales__heading--small

c-sales__subheading

c-sales__details

另一个选项不那么冗长，但 BEM 建议不要这样做：您可以使用嵌套选择器。从技术上讲，这将是一个主题而不是修饰符，但它可以实现您想要的（在块级别修改内容）。看看这个：https://en.bem.info/methodology/css/#nested-selectors

c-sales c-sales-theme-small

c-sales__headlead

c-sales__heading

c-sales__subheading

c-sales__details

Answer 2

最好的办法是先制作一个元素的基础版本，然后给它添加小的或大的修饰符：

<!-- Base version -->

<div class="c-sales p3">
   <p class="c-sales__headlead">Limited time only</p>
   <h1 class="c-sales__heading">FIRST 2 MONTHS <span style="color:#00ce7d;">FREE!</span></h1>
   <h2 class="c-sales__subheading pt2">Only in September</h2>
   <p class="c-sales__details">this is some text</p>
 </div>
 
 
<!-- Small version -->

 <div class="c-sales c-sales--small p3">
   <p class="c-sales__headlead c-sales__headlead--small">Limited time only</p>
   <h1 class="c-sales__heading c-sales__heading--small">FIRST 2 MONTHS <span style="color:#00ce7d;">FREE!</span></h1>
   <h2 class="c-sales__subheading c-sales__subheading--small pt2">Only in September</h2>
   <p class="c-sales__details c-sales__details--small">this is some text</p>
 </div>
 

<!-- Large version -->

 <div class="c-sales c-sales--large p3">
   <p class="c-sales__headlead c-sales__headlead--large">Limited time only</p>
   <h1 class="c-sales__heading c-sales__heading--large">FIRST 2 MONTHS <span style="color:#00ce7d;">FREE!</span></h1>
   <h2 class="c-sales__subheading c-sales__subheading--large pt2">Only in September</h2>
   <p class="c-sales__details c-sales__details--large">this is some text</p>
 </div>