-
ID:0zH0SY さんの質問

表のCSS、命名規則について悩んでいます。以下のような表があるとします。

theadやtbody内の「日付」を調整したい場合、皆さんはどういうclass名を付けるでしょうか？単純に「class="date"」にするか、「class="list-date"」にするか、「class="list-thread-date"」にするかなど、色んなパターンが考えられるために悩んでいます。

できるだけ汎用性が高く、誰が見ても分かるコーディングがしたいと思っています。アドバイスお願いします。

<table class="list">
<thead>
<tr>
<th>日付</th>
<th>タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<td>2014/05/11</td>
<td>タイトルです</td>
</tr>
</tbody>
</table>

みんなの回答 3 件

ID:JC15Db さんの回答

td>timeでいいんちゃうの
ID:6K2XPD さんの回答

tableをtable-wrapper
thをtable-title
tdをtable-contents
などに変えるかもしれません。
class名にdateを使うと、日付以外のものが入った時に使えなくなってしまうので、このような記述を考えるかもしれません。
ID:ucF3Gy さんの回答

悩むぐらいなら素直にBEMる。
tableがlistってのにすごい違和感を覚えるが、この表がスケジュール表だと仮定すると

tableにschedule
thead > thにschedule__header__date
thead > tdにschedule__header__title
tbody > thにschedule__content__date
tbody > tdにschedule__content__title

誰がみてもわかるという風にするには、シンプルセレクタは避けた方がいいと思う。
ID:0zH0SY

BEMの考え方は理解できるのですが、この場合、ソースが長くなって見づらくならないでしょうか？

<table class="schedule">
<thead>
<tr>
<th class="schedule__header--date">日付</th>
<th class="schedule__header--title">タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<td class="schedule__content--date">2014/05/11</td>
<td class="schedule__content--title">タイトルです</td>
</tr>
</tbody>
</table>

ID:ucF3Gy

見づらいというのは個人差や、環境差（シンタックスハイライトや画面幅による1行の表示文字数）があるとおもうので、なんとも言えないですが、個人的には見づらいと思ったことはないです。

それに今回はシンプルなHTMLですが、マイクロデータやWAI-ARIAなんかのメタ情報を埋め込んでいくとHTMLはどうしても見づらくなるんじゃないかな。

あとBEMの概念として__dateや__titleを,--date,--titleと修正していますが、--は状態を表す名前につける区切りなので、この場合は__が正しいと思います。

（ハイフン）--を使うのはschedule__content__date--activeのような時ですね。

ID:0zH0SY

なるほど。主観なのは確かですが、「schedule__content__date--active」とかさすがに長過ぎると感じるんですよね・・。

有名どころのサイトのソースを見ても、上記のような書き方はしていないので、どうするべきか悩んでいます。

ID:ucF3Gy

有名どころだと、GoogleのWeb FundamentalsとかはBEMとOOCSS組み合わせて結構長いクラス名つかってますね。

ttps://github.com/google/WebFundamentals/blob/master/src/site/index.html

ID:0zH0SY

ありがとうございます。参考にします。

最終更新日:2014-05-11 (5,550 views)

関連するトピックス

ページ上部に戻る