特定于页面的样式应如何应用于 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