吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

BEMを使用したときのクラス名について

2016年12月11日 / category : その他-lab

前回の記事で、「コーディングは自分の中でルールを決めておくことで、作業がスムーズになる」と書きましたが、
CSSのクラス名についてもこのことが言えます。
クラス名をあらかじめ決めておきましょう。これはBEMに限らず、コーディング作業ではこのルールを作っておいた方が良いでしょう。
では、どのようにクラス名のルールを作るか。
html要素のタグで考えてみましょう。

h要素
この要素に入る情報は「見出し」です。見出し以外の情報が入ることは考えられません。
となると、クラス名はどのような文字列が考えられるでしょうか。
私の場合、「tit」で統一していますが、「title」など「見出し」を連想できるような文字列であれば良いでしょう。
これをBEMのElementにする場合は、
block__titまたはblock__titleのようなクラス名でいかがでしょうか。

続いて、p要素
これもh要素と同じように考えると、p要素に入る情報は文章です。
ただ、p要素の場合、この文章が「見出し」になる場合や、あるいは「ボタン」になる場合もあります。
そのため、通常の文章の場合は「txt」、見出しの場合は「tit」、そしてボタンの場合は「btn」の3パターンが出てきます。
BEMの場合は、block__txt, block__tit, block__btnでいかがでしょうか。

このようにhtmlのタグから考え、クラス名をルール化することで、クラス名をある程度固定できます。
いくつかまとめてみましたので、次の表を参考にしてみてください。

クラス名
(BEMのクラス名)
説明 クラス名に使用されるタグ要素
tit
(block__tit)
見出しにつけるクラス名。 <h>, <p>
txt
(block__txt)
文章につけるクラス名 <p>
btn
(block__btn)
ボタンにつけるクラス名 <p>, <a>, <button>, <span>
link
(block__link)
リンクテキストにつけるクラス名 <a>
pic
(block__pic)
画像(figture要素)につけるクラス名 <figture>
img
(block__img)
画像(img要素)につけるクラス名 <img>
list
(block__list)
リストにつけるクラス名 <ul>, <ol>
list-item
(block__list-item)
li要素につけるクラス名 <li>
table
(block__table)
table要素につけるクラス名 <table>
table-row
(block__table-row)
tr要素につけるクラス名 <tr>
table-head
(block__table-head)
th要素につけるクラス名 <th>
table-data
(block__table-data)
td要素につけるクラス名 <td>
def
(block__def)
dl要素につけるクラス名 <dl>
def-tit
(block__def-tit)
dt要素につけるクラス名 <dt>
def-data
(block__def-data)
dd要素につけるクラス名 <dd>
form
(block__form)
form要素につけるクラス名 <form>
select
(block__select)
select要素につけるクラス名 <select>
input
(block__input)
input要素につけるクラス名 <input>
textarea
(block__textarea)
textarea要素につけるクラス名 <textarea>
inner
(block__inner)
インナーにつけるクラス名 <div>
icon
(block__icon)
アイコンにつけるクラス名 <span>
mark
(block__mark)
マークにつけるクラス名 <span>

上記は主な例ですが、このようにあらかじめクラス名を決めておくことで、クラス名に迷うこともなく、スムーズにコーディング作業を進めることができます。