BEMの書き方をスモールに体験してみる

CSS設計の一つとして、BEMがあります。

そのBEMを学ぶために、小さなコンポーネントをマークアップしてみます。今回は、FacebookをPCで見たときの「連絡先」に載っている、ユーザーのリストをマークアップしてみました。

マークアップする対象を確認する

対象は、Facebookの右サイドバーにある「連絡先」に載っているユーザーのリストです。（「連絡先」の文字の下にある円に写真、その右側に名前が並んでいます。）

実際にマークアップしたもの

codepenに実際にマークアップしたものを載せています。

今回は、ユーザーリストのみをマークアップしたので「連絡先」の右側に並んでいたアイコン群はマークアップしていません。

HTMLだけ抜粋

今回はBEMを体験するという趣旨でマークアップをしたので、先ほど載せたcodepenに書いたコードから、HTMLのみを抜粋したものを下に載せます。

<section class="contact">
 <h2 class='contact__header'>Contacts</h2>
 <div>
   <ul class='contact__lists'>
     <li class='contact__list'>
       <a class='contact__list-user' href="">
         <div class='contact__avatar'>
           <img class='contact__img' src="画像パス" alt="">
           <span class='contact__is-login'>23時間前</span>
         </div>
         <p class='contact__name'>Yoko Ono</p>
       </a>
     </li>
     <li class='contact__list'>
       <a class='contact__list-user' href="">
         <div><img class='contact__img' src="画像パス" alt=""></div>
         <p class='contact__name'>John Lenon</p>
       </a>
     </li>
   </ul>
 </div>
</section>

書いてみてつまづいたところ

Element兼Block要素をどう表現すればいいかわからなかった

contact__list-userクラス直下にcontact__avatarクラスを付与したマークアップをしているのですが、ここはlist-user__avatarとしたかったです。contactブロックに依存させる必要は無いと感じたからです。
こういう場合、contact__list-userクラスとlist-userクラスを同時に定義していいのでしょうか？（調べきれてない部分でもあるので、ひとまず疑問形…）

Modifierかどうかが判断できない

直近でログインしたユーザーのアイコンに「○○時間前」という文字が表示されているのですが、それを表現するのが、Element要素なのかModifierなのかの判断に苦しみました。
Modifierは見た目や振る舞いが異なる場合に使うという認識なので、contact__imgクラスのModifierとしてcontact__img--loginみたいなクラスを定義するのがいいのでは？と思いました。
しかし、contact__imgの見た目そのものに対してのModifierではないなと判断したため、クラスを別にしました。contact__is-loginという形で、contactブロックのElementという書き方をしていますが、これは何か違うのではないかとモヤモヤしています…。（1つ目のつまづきと似ています(´；ω；｀)）

書いてみての感想

• マークアップを見ただけで、そこに何が表現されるのかがわかるので経験値の低い自分にとってありがたい。これまでcontainerとかinner-containerを必要になった分だけ定義を増やすみたいなことをしていたので、非常に保守性の悪いコードを書いていたんだということがわかった。

終わりに

ウェブサイトを一つつくってみてからまた振り返りをすることにします。