ページ固有のスタイリングを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