scss BEM 修改器的困难
Difficulties with scss BEM modifiers
我很难理解如何使用 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;
我误会了什么?看了一些关于 scss with BEM 的教程,还是没看懂。
当你 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 提倡的是使用系统的命名方式 classes 来设置文档的样式,但是手动编写 BEM 是一场噩梦。 Sass 使用 &
引用的父选择器使编写 BEM 变得容易,但您仍然必须记住,在使用 &
时您只是生成 class 名称而不是实际嵌套在 Sass.
这一切意味着,在您的情况下,您需要为要应用的各种 CSS 规则添加以下每个 classes:
<div class="SomeBlock SomeBlock__someElement SomeBlock__someElement--greenBG">text</div>
这是根据 BEM 方法命名 类 的最佳方式:
/* Block component */
.btn {}
/* Element that depends upon the block */
.btn__price {}
/* Modifier that changes the style of the block */
.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>
实际上,您比@dippas 更准确地使用 BEM。我会像这样修改你的代码:
<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 */
}
作为一般规则,无论何时您想要使用修饰符,您都需要记住使用修饰符额外添加元素 class。因此,对于您的元素,您的基数 class 为 '.some-block__some-element'。您需要将此添加到所有需要此 class 的元素。然后使用相同的 class 并将其再次添加到带有修饰符的元素中。在您的示例中,由于您仅将基数 class 添加到三个元素的第一次出现处,因此 css 自然只会为背景设置样式:蓝色和文本对齐:居中。
此外,虽然从技术上讲您可以使用大写 class 名称,但我建议使用小写 class 名称并用单个连字符分隔多个单词名称,而不是使用大写驼峰式大小写。
我很难理解如何使用 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;
我误会了什么?看了一些关于 scss with BEM 的教程,还是没看懂。
当你 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 提倡的是使用系统的命名方式 classes 来设置文档的样式,但是手动编写 BEM 是一场噩梦。 Sass 使用 &
引用的父选择器使编写 BEM 变得容易,但您仍然必须记住,在使用 &
时您只是生成 class 名称而不是实际嵌套在 Sass.
这一切意味着,在您的情况下,您需要为要应用的各种 CSS 规则添加以下每个 classes:
<div class="SomeBlock SomeBlock__someElement SomeBlock__someElement--greenBG">text</div>
这是根据 BEM 方法命名 类 的最佳方式:
/* Block component */
.btn {}
/* Element that depends upon the block */
.btn__price {}
/* Modifier that changes the style of the block */
.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>
实际上,您比@dippas 更准确地使用 BEM。我会像这样修改你的代码:
<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 */
}
作为一般规则,无论何时您想要使用修饰符,您都需要记住使用修饰符额外添加元素 class。因此,对于您的元素,您的基数 class 为 '.some-block__some-element'。您需要将此添加到所有需要此 class 的元素。然后使用相同的 class 并将其再次添加到带有修饰符的元素中。在您的示例中,由于您仅将基数 class 添加到三个元素的第一次出现处,因此 css 自然只会为背景设置样式:蓝色和文本对齐:居中。
此外,虽然从技术上讲您可以使用大写 class 名称,但我建议使用小写 class 名称并用单个连字符分隔多个单词名称,而不是使用大写驼峰式大小写。