胸をBEMで例えるとどうなるか?

第二回Web屋乳談義 〜新年だよ( ゚∀゚)o彡°おっぱいおっぱい〜という新年会に参加してきました。

そこで、最近流行りのBEMで胸を表現する話を皆でして面白かったので酒の勢いを借りて公開しようと思います。

はじめに

HTMLで身体をセクショニングするのは無理。XMLを使ったほうがいい。

Block, Element, Modifierをどうするか

  • 胸をBlockとする
  • 左右の胸をElementとして分けるかどうか?
  • 乳首の色や形はModifier?
  • 乳輪の中に乳首が入っている感じ。block__element__elementという感じになってしまうのでは
  • 哺乳類の中には単乳や複乳もいるので、左か右かはModifierとする
  • 乳首の初期スタイルシートは"TRBL" methodがいいのでは
  • 問題は:activeと:hoverといった疑似クラスに当てられたスタイルが似ているせいで、感じてもいないのに誤解されるということが起きることであり、このことからも全く違う状態に同じスタイルを適用されるのはまずいということが分かる

それ以外にも話してた気がしますが、いかんせん酒を飲みながら話していたので忘れました。

ただ、上のことを踏まえて胸をマークアップするなら以下のような感じになるのではないでしょうか(なおルールはMindBEMdingに沿っています)。

サンプルコード

<main class="body">
    <div class="breast">
        <div class="breast--left">
            <div class="breast--left__areola">
                <div class="breast--left__nipple"></div>
            </div>
        </div>
        <div class="breast--right">
            <div class="breast--right__areola">
                <div class="breast--right__nipple"></div>
            </div>
        </div>
    </div>
</main>

終わりに

今回、胸をマークアップしてみましたが、胸に関して言えば状態の数がかなりあると思います(例えば乳輪の色とか乳首の形とか)。

そうなるとModifierの管理が大変そうな感じがしますが、そこは運用していって最適な形にするのがいいのかなと思います。