scss BEM修飾符的難點

Question

我很難理解如何正確使用BEM命名約定編寫scss。

在這裏我有一些HTML：

<div class="SomeBlock"> 
    <div class="SomeBlock__someElement">text</div> 
</div> 

<div class="SomeBlock"> 
    <div class="SomeBlock__someElement--greenBG">text</div> 
</div> 

<div class="SomeBlock"> 
    <div class="SomeBlock__someElement--orangeBG">text</div> 
</div> 

而且後續SCSS：

.SomeBlock { 
    margin: 10px 0 0 0; 
    color: white; 
    width: 100px; 
    height: 50px; 
    background: red; 

    &__someElement { 
     background: blue; 
     text-align: center; 

     &--greenBG { 
     background: green; 
     } 

     &--orangeBG { 
     background: orange; 
     } 
    } 
} 

我會希望發生的是有3個不同的塊，所有相同的，但不同顏色的backgrounds，這是發生了什麼除了文本沒有居中，因爲我期望它是因爲我的元素風格有text-align: center;

什麼是我誤解了？我已經閱讀了關於BEM的一些教程，但我仍然不明白。

Answer 1

其實，你在使用精確比BEM @dippas有點接近。我會修改你的代碼是這樣的：

<div class="some-block"> 
    <div class="some-block__some-element">text</div> 
</div> 

<div class="some-block"> 
    <div class="some-block__some-element some-block__some-element--green-bg">text</div> 
</div> 

<div class="some-block"> 
    <div class="some-block__some-element--orange-bg">text</div> 
</div> 

SCSS

.some-block { 
    margin: 10px 0 0 0; 
    color: white; 
    width: 100px; 
    height: 50px; 
    background: red; 

    &__some-element { 
     background: blue; 
     text-align: center; 

     &--green-bg { 
     background: green; 
     } 

     &--orange-bg { 
     background: orange; 
     } 
    } 
} 

這裏的簡化輸出css來看待事物。

.some-block { 
    /* block styles */ 
} 
.some-block__some-element { 
    /* element styles */ 
} 
.some-block__some-element--green-bg { 
    /* element mod styles */ 
} 

一般來說，只要你想使用修改器，你需要記住要添加的元素類的額外的時間與修改。所以對於你的元素，你有一個基類'.some-block__some-element'。您需要將其添加到所有需要此類的元素。然後使用相同的類並使用修飾符將其重新添加到元素中。在你的例子中，因爲你只是將這個基類添加到三個元素的第一個出現處，所以css自然只會用背景來設置它：藍色和text-align：center。

此外，儘管您在技術上可以避免使用大寫的類名，但我會建議使用小寫的類名並使用單個連字符而不是使用上部駱駝套來分隔多字名稱。

Answer 2

當你reference parent selectors using & in Sass因爲它不會做你認爲它的事情時要小心。

在SCSS正常嵌套，這樣：

a { 
    b { 
    /* styling */ 
    } 
} 

a b { /* styling */ }生成。

但是，當您參考使用&，這位家長選擇：

a { 
    &__b { 
    /* styling */ 
    } 
} 

變成：a__b { /* styling */ } // note that this is one class。

BEM倡導的是使用命名類的系統化方式來設計文檔樣式，但手動書寫BEM是一場噩夢。使用&的Sass父選擇器引用使得寫出BEM變得容易，但是您仍然必須記住，在Sass中使用&時，您只會生成類名稱而不實際嵌套。

這一切都意味着，在你的情況，你需要添加以下每個類爲您的各種CSS規則適用：

<div class="SomeBlock SomeBlock__someElement SomeBlock__someElement--greenBG">text</div> 

Answer 3

這是在命名類的最佳方式相應地BEM方法：

/*塊組成部分*/

.btn {}

/*這取決於塊元素*/

.btn__price {}

/*修改改變的塊樣式*/

.btn--orange {} .btn--big {}

在BEM 101看看，CSS技巧

所以我會用它單個類來簡化。

.someblock { 
 
    margin: 10px 0 0 0; 
 
    color: white; 
 
    width: 100px; 
 
    height: 50px; 
 
    background: red; 
 
} 
 
.some__element { 
 
    background: blue; 
 
    text-align: center; 
 
} 
 
.green--bg { 
 
    background: green; 
 
} 
 
.orange--bg { 
 
    background: orange; 
 
}

<div class="someblock"> 
 
    <div class="someblock some__element">text</div> 
 
</div> 
 

 
<div class="someblock"> 
 
    <div class="someblock some__element green--bg">text</div> 
 
</div> 
 

 
<div class="someblock"> 
 
    <div class="someblock some__element orange--bg">text</div> 
 
</div>