1:ID:ug88EU · 2018-05-22

BEMとSCSSの組み合わせについて質問です。
BEMの書き方は.blockelement--modifierですがSCSSファイル内では
.block { ... }
.blockelement { ... }
.blockelement--modifier { ... }
と書いていくべきか、
.block {
...
&element {
...
&--modifier {
...
}
}
}
と書いていくべきか、どちらでしょうか。
私は今のところ検索機能を使ったりextend使ったりする都合で前の方の書き方をしてますが、後の方が記述量が少ないというメリットもあると思ってます。
ご意見をお聞かせください。

いいね! 9 あとで

9 件の回答

時系列表示 — 階層表示

2:ID:MCORS9 · 2018-05-23

SCSS使うなら

.block {
&__element {
&--modifier{
}
}
}

ってする以外ないだろ。分ける意味が分からん。

3:ID:AErP4T · 2018-05-23

自分は前者の
.block { ... }
.block__element { ... }
.block__element--modifier { ... }
で書いてます。
そのほうが、クラス名の検索が楽なので。

4:ID:cCjAQ9 · 2018-05-23

Re:2
これ

5:ID:主 · 2018-05-23

Re:2
コメントありがとうございます。
実機で検証し、修正するときの検索が手間で結局前者で書いちゃうのですが、それをサポートするエディタ等を使用しているのでしょうか？
それとも、elementやmodifierをそれぞれblock毎に表現を分けているのでしょうか？

6:ID:主 · 2018-05-23

Re:3
コメントありがとうございます。
クラス名検索が楽なのとextendを使うのが楽なので私も&を使用するのは少なめにしています。

7:ID:MCORS9 · 2018-05-23

Re:5
コメント書けばいいじゃん・・・なんのためのSCSSだよ

8:ID:主 · 2018-05-23

Re:7
コメントでという風にクラスを書いていくということですか・・・？それならば最初から.block__element--modifier{ ... }で書いていった方が早いと思うのですが・・・多分違いますよね。

9:ID:66nkID · 2018-05-23

Re:8
SCSSのコメントとちゃうで、それ
コメント書いたとしても、ネスト出来る分、記述量減らせるやろ？
あと、実機検証はsourcemapだしておけば、ビルド前のソースの行数出るから、
エディタ上でその行に移動して書けばいい。
オレはそうしてて何の不満もないから、検索なんて滅多に使わんわ。

10:ID:主 · 2018-05-23

Re:9
多分、さっきのコメント書いたときの自分はどうかしてました。忘れてください。
sourcemapの存在を初めて知りました・・・。これあれば検索は不要ですね。今後使っていきます。
ありがとうございます。

コメントの受付は終了しました。