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; }

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

Answer 1

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

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

1 个答案: