-
1:ID:j/W2yO · 2018-10-29

#bem BEMについて
みなさんならどちらの書き方にしますか?
もっとスマートなやり方があれば教えてください。

1.boxを親に書く
<div class="box">
<h3 class="box__ttl"></h3>
<div class="box__contents">
<p class="box__col box__col--left"></p>
<div class="box__col box__col--right">
<p class="box__colTxt"></p>
<dl class="box__colDef">
<dt class="box__colDefTtl"></dt>
<dd class="box__colDefData"></dd>
</dl>
<p class="ico ico--a">A</p>
</div>
</div>
</div>

2.コンポーネントを小分けして書く
<div class="box">
<h3 class="box__ttl"></h3>
<div class="box__contents">
<p class="col col--left">ttl</p>
<div class="col col--right">
<p class="col__Txt"></p>
<dl class="def">
<dt class="def__Ttl"></dt>
<dd class="def__Data"></dd>
</dl>
<p class="ico ico--a">A</p>
</div>
</div>
</div>

よろしくおねがいします

15 件の回答

2:ID:pz1vif · 2018-10-29

俺はあまりチームでコーディングしないから、BEMはカスタマイズしてるなあ。ハイフンとかアンスコは全部1つにしてるし、leftはl、rightはrで省略とかしちゃう。

3:ID: · 2018-10-29

Re:2
ありがとうございます!参考にします。AかBだったらどっち使いますか?

4:ID:pz1vif · 2018-10-29

Re:3
俺の場合はSCSSで書くの前提だから、どちらかというとA。
box { ... &__ttl { ... } &__col { ... } }

5:ID: · 2018-10-29

Re:4
ありがとうございます!

6:ID:d6O5fB · 2018-10-29

BEMはネーミングがながいからRSCSSのがスマート感はある。

7:ID: · 2018-10-29

Re:6
RSCSSなんて初めて知った、、、ありがとうございます!

8:ID:QzzaNt · 2018-10-29

1にしてる。2にしてきちっと管理したいけど煩雑になるとなにがなんだかわからなくなってしまうので、冗長だけど、どこのなにに対して当たってるのかわかりやすい1。ただもっとうまくやれるのでは…というのはいつも考えている。

9:ID:fqulyM · 2018-10-29

2にします。
1で名前をひねり出しながらやると、何かが追加になった時に大変なので。
悩む時間がもったいないので、なるべく悩まない方法を取ります。

10:ID: · 2018-10-29

Re:8
ご回答ありがとうございます!同じくもっとうまくやれるのでは、、と自分もいつも考えてやってます。。

11:ID: · 2018-10-29

Re:9
Re:8
ご回答ありがとうございます!パーツの使い回しを考えたらこっちなんですよねぇ、、、

12:ID:ddEMAg · 2018-10-29

2だけど命名がおかしいな。col__Txtとかなんやねん。どっちも省略したら分かりづらいだろ

13:ID: · 2018-10-29

Re:12
col__txtでっすね?

14:ID:ddEMAg · 2018-10-29

Re:13
いや、colは言わば接頭辞だろ?短縮してるのにその後ろのtxtも短縮するのはおかしいじゃん。

15:ID: · 2018-10-29

Re:14
ほぇぇ、勉強になります汗
ありがとうございます。

16:ID:8gM3KG · 2018-10-30

2でやってます
コンポーネント毎sassファイル書き出してるので
でも煩わしさの方が勝ってて、小規模ならそんなこだわらずスピード重視で1で済ましちゃった方がいいのかと悩んでおります

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

一緒に読まれている質問

ページ上部に戻る