如何将特定于页面的样式应用于 BEM 块？

Question

假设我们有一个名为 .button 的块元素，我们希望在多个不同页面上重复使用 具有不同边距 值的块元素。

可能的解决方案：

//1. Nested styles 
.page-1 {
    .button { margin: 10px; }
}

.page-2 {
    .button { margin: 20px; }
}

//2. Specific modifier for EACH page
.button {
    &--pg-1-margin { margin: 10px; }
    &--pg-2-margin { margin: 20px; }
}

// 3. Special, page-specific block level element
// which will be COMBINED with an existing block-level 
// element (ex: <button class="button page-1-element">...</button>)
.page-1-element { margin: 10px; }
.page-2-element { margin: 20px; }

1. 其中哪一种会被视为对 BEM 友好的方式？
2. 如果使用了太多不同的边距，第一种方法是否可接受/首选方法？

Answer 1

以下是官方文档中您问题的答案：https://en.bem.info/methodology/css/#external-geometry-and-positioning