これはしばらくの間私を困惑させてきました。
Sass (SCSS) を使用し、 lib-sass に対して BEM のような命名規則を実装します。
たとえば、次のようになります。
.description {
.title {
color: red;
}
}
そしてdescription--special
、次のことをしたい場合があります:
.description {
.title {
color: red;
}
&--special {
.title {
color: blue;
}
}
}
当然のことながら、使用目的は次のとおりであるため、特異性の問題が発生します。
<div class="description description--special"></div>
誰かがこれを行うのに十分エレガントな方法を提案できますか?
現在の「最良の」提案は、これを行うことです:
.description.description--special {
.title {
color: blue;
}
}
もちろん、少なくともlib-sassでは、これは機能しません。
.description {
.title {
color: red;
}
&.&--special {
.title {
color: blue;
}
}
}
これもしません:
.description {
&root: &;
.title {
color: red;
}
&.#{&root}--special {
.title {
color: blue;
}
}
}