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

最好的方法是先制作元素的基础版本，然后为其添加小或大的修饰符：

<!-- 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>

Answer 2

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

BEM CSS 块或修饰符

BEM CSS Block or modifier

css

bem