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>