BEMとSCSSの組み合わせについて質問です。
BEMの書き方は.block__element--modifierですがSCSSファイル内では
.block { ... }
.block__element { ... }
.block__element--modifier { ... }
と書いていくべきか、
.block {
...
&__element {
...
&--modifier {
...
}
}
}
と書いていくべきか、どちらでしょうか。
私は今のところ検索機能を使ったりextend使ったりする都合で前の方の書き方をしてますが、後の方が記述量が少ないというメリットもあると思ってます。
ご意見をお聞かせください。
一緒に読まれている質問
- #質問 webデザイナーですが、ライティングに興味があります。今の会社ではクライアントからもらう原稿をそのまま流し込むのが基本で...
- サーバーのレンタル代、インターネット代は経費に含まれますか。ネット収入の額が大きくなったので確定申告をしようと思っていま...
- 会社で嫌なことがあると、ずっと引きずって1日中寝てたり、具合が悪くなるのだけど、みなさんはどうやって気持ち切り替えてます...
- お住まいの都道府県と役職、年齢、年収を書いてください。福岡27歳ディレクター年収420万
- #質問 知識インプットや人脈作りを兼ねてデザイナー向け勉強会に参加しようか考えているのですが、迷っています。当方、20代2年目U...
- #質問 webデザイナーですが、ライティングに興味があります。今の会社ではクライアントからもらう原稿をそのまま流し込むのが基本で...
- エンジニアさんがReactやVueなどのフレームワークをやりたいと行って退職してしまいます。そんなにも楽しいものなのでし...
- お住まいの都道府県と役職、年齢、年収を書いてください。福岡27歳ディレクター年収420万
- サーバーのレンタル代、インターネット代は経費に含まれますか。ネット収入の額が大きくなったので確定申告をしようと思っていま...
- メルカリが界隈で崇拝されてるのに吐き気がするお問い合わせのしづらさに全力出してるUX偉そうに顧客を守ります的な白々しい宣...
- お住まいの都道府県と役職、年齢、年収を書いてください。福岡27歳ディレクター年収420万
- 会社で嫌なことがあると、ずっと引きずって1日中寝てたり、具合が悪くなるのだけど、みなさんはどうやって気持ち切り替えてます...
- サーバーのレンタル代、インターネット代は経費に含まれますか。ネット収入の額が大きくなったので確定申告をしようと思っていま...
- エンジニアさんがReactやVueなどのフレームワークをやりたいと行って退職してしまいます。そんなにも楽しいものなのでし...
- #質問 知識インプットや人脈作りを兼ねてデザイナー向け勉強会に参加しようか考えているのですが、迷っています。当方、20代2年目U...
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の存在を初めて知りました・・・。これあれば検索は不要ですね。今後使っていきます。
ありがとうございます。