BEMとSCSSの組み合わせについて質問です。
BEMの書き方は.block__element--modifierですがSCSSファイル内では
.block { ... }
.block__element { ... }
.block__element--modifier { ... }
と書いていくべきか、
.block {
...
&__element {
...
&--modifier {
...
}
}
}
と書いていくべきか、どちらでしょうか。
私は今のところ検索機能を使ったりextend使ったりする都合で前の方の書き方をしてますが、後の方が記述量が少ないというメリットもあると思ってます。
ご意見をお聞かせください。
一緒に読まれている質問
- #トラブル,法律 クライアントにサイト納品(サーバーアップ)してから1年後クライアントがサーバー代金支払いを忘れていて、サーバー自動解約と...
- 看板、フライヤー、名刺、雑誌広告などを制作しているデザイナーの方に質問です。ディレクターの指示はどのような流れで来ますか...
- 取引してる広告代理店が未だにCS5なせいで納品後数時間後に あ!バージョン落としてください!て連絡来るのがイラつきます。...
- 社内にコーダー、デザイナーが私しかいなくて、2ヶ月くらいで3つのサイト制作(デザイン含む、10ページくらいある普通のコー...
- 外部のデザイナー(?)のバナーのデザインのクオリティが低く困っているですが、デザイナーさん、どう伝えられたら受け止めやす...
- #トラブル,法律 クライアントにサイト納品(サーバーアップ)してから1年後クライアントがサーバー代金支払いを忘れていて、サーバー自動解約と...
- 看板、フライヤー、名刺、雑誌広告などを制作しているデザイナーの方に質問です。ディレクターの指示はどのような流れで来ますか...
- #質問 社会人5年目(27)で実家暮らしってやばいんか?金もめっちゃたまるし、実家快適すぎて、一人暮らししたくないんだけどw母さ...
- 社内にコーダー、デザイナーが私しかいなくて、2ヶ月くらいで3つのサイト制作(デザイン含む、10ページくらいある普通のコー...
- 社会不適合者なんでしょうか。大学を卒業して3年が経ち、4年目ですが既に6社目です。1年続いた会社はありせん。ただ月収は、...
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の存在を初めて知りました・・・。これあれば検索は不要ですね。今後使っていきます。
ありがとうございます。