css - BEM CSS block 或修饰符

Question

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

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

<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 不建议使用它:您可以使用嵌套选择器。从技术上讲，这将是一个主题而不是修饰符，但它可以实现您想要的(在 block 级别修改内容)。看看这个: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