css - 特定于页面的样式应如何应用于 BEM block ？

Question

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

可能的解决方案:

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