Zenn
👩‍💻

ところでBEMって何？

2022/10/16に公開
CSS
HTML
tech

ところでBEMって何？

はじめに

以前、ブログでコーディング規約を書かせて頂きましたが、ここ最近、企業様とのお話でBEMを使用したコーディングルールが大半を締めているので、BEMについてもう少し深く書きたいと思います。
よくHTMLやCSSは簡単という意見を聞きますが、私的には実装は他の言語と比べて、しっかり反映してくれるだけで、全く簡単と言いきれないです。逆に何が難しいか…それは保守管理。

実装したコード

sample.html
<div id="gyousha_sec_back"> 
    <div class="title_box"> タイトル </div> 
    <div class="gyousha_box"> 
        <div class="gyousha_box_inner"> 詳細 </div> 
    </div> 
</div>

ぶっちゃけ、divや命名などをテキトーにやったとしても、レイアウトさえ崩さなければいいんですが…
修正作業やコンテンツの追加の際にこのコードが適切かというと、適切ではないです。

そこで使うのがBEM(ベム)

BEMとは、Block、Element、Modifierの事です。
Blockは塊
Elementは要素
Modifierは状態(変化)
日本語にするとこんな意味になりますが、実際どんなコードか下記のようなものになります。

sample.html
<section class="gyousha"> 
    <h2 class="gyousha__title"> タイトル </h2> 
    <div class="gyousha__outer"> 
        <div class="gyousha__inner"> 
            <p class="gyousha__txt--colorRed">詳細</p>
        </div>
    </div> 
</section>

つまり

“gyousha”=>block
“gyousha__outer”など=>Element
“gyousha__txt–colorRed”=>Modifier

となります。

私の場合は、gyousha__txt–colorRedのcolorとredがありますが、２つ以上の単語が列なるものに対しては、２つ目以降の単語の一文字目は大文字で対応しております。
また、これに関して-(ハイフン)を使ったりといろんなやり方がありますが、Block、Element、Modifierの理論とid名をページ内リンクだけ使用さえすれば、大丈夫です。

BEMでもいろんな書き方があります。下記の参考のURLをご覧ください。

BEMを参考にしたCSS設計

※参考

  1. BEMを参考にしたCSS設計
    https://qiita.com/mrd-takahashi/items/07dc3b4bad027daa2884"

  2. 一番詳しいCSS設計規則BEMのマニュアル
    https://qiita.com/Takuan_Oishii/items/0f0d2c5dc33a9b2d9cb1"

まとめ

プロジェクトでチーム開発をする事が多くなるため、もうちょい突っ込んで書いてみました。
楽なのは命名規則に困らないのと、学習コストもそんな仕切りが高くはないのが特徴ですが！！
ただ、今後は命名の長さを抑えていきたいなと考えております。

Discussion