BEMとSCSSの組み合わせについて質問です。
BEMの書き方は.block__element--modifierですがSCSSファイル内では
.block { ... }
.block__element { ... }
.block__element--modifier { ... }
と書いていくべきか、
.block {
...
&__element {
...
&--modifier {
...
}
}
}
と書いていくべきか、どちらでしょうか。
私は今のところ検索機能を使ったりextend使ったりする都合で前の方の書き方をしてますが、後の方が記述量が少ないというメリットもあると思ってます。
ご意見をお聞かせください。
9 件の回答
SCSS使うなら
.block {
&__element {
&--modifier{
}
}
}
ってする以外ないだろ。分ける意味が分からん。
自分は前者の
.block { ... }
.block__element { ... }
.block__element--modifier { ... }
で書いてます。
そのほうが、クラス名の検索が楽なので。
Re:2
これ
Re:2
コメントありがとうございます。
実機で検証し、修正するときの検索が手間で結局前者で書いちゃうのですが、それをサポートするエディタ等を使用しているのでしょうか？
それとも、elementやmodifierをそれぞれblock毎に表現を分けているのでしょうか？
Re:3
コメントありがとうございます。
クラス名検索が楽なのとextendを使うのが楽なので私も&を使用するのは少なめにしています。
Re:5
コメント書けばいいじゃん・・・なんのためのSCSSだよ
Re:7
コメントで<!-- .block__element--modifier -->という風にクラスを書いていくということですか・・・？それならば最初から.block__element--modifier{ ... }で書いていった方が早いと思うのですが・・・多分違いますよね。
Re:8
SCSSのコメントとちゃうで、それ
コメント書いたとしても、ネスト出来る分、記述量減らせるやろ？
あと、実機検証はsourcemapだしておけば、ビルド前のソースの行数出るから、
エディタ上でその行に移動して書けばいい。
オレはそうしてて何の不満もないから、検索なんて滅多に使わんわ。
Re:9
多分、さっきのコメント書いたときの自分はどうかしてました。忘れてください。
sourcemapの存在を初めて知りました・・・。これあれば検索は不要ですね。今後使っていきます。
ありがとうございます。