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块或修改器

2 个答案: