HTML CSS クラスの命名規則
ブロックなど親要素で使うclass名
container : コンテナ
main : メイン
global : グローバル
home : ホーム
hero : でかいブロック。bootstrapのサンプルにある
inner : 中身。
outer : 囲っているもの。親。wrapperと同じ。
wrapper : 囲っているもの。親。
例えば、facebookのidだとおおまかに
home > globalContainer > content > mainContainer
ブロックや子要素で使えそうなclass名
article : articleタグがあるのであまり使いたくない。
block : 囲っているもの。
card : カード
cell : セル。blockと同じかも。
grid : グリッド
item : 子要素。使いやすい。
module : モジュール。ブログのウィジェットや新着コメント領域などへ。
恐らくgridのほうがcellよりでかいです。うろおぼえですがTwitterがそんな感じでした。
grid > cell
◯◯の一覧系で使えそうなclass名
articles : 記事の一覧
comments : コメント一覧
contents : contentを複数囲むなら
users : ユーザーの一覧
一覧系の上位は複数系にして、子要素は単数形にするという方法があります。
画像要素で使えそうなclass名
avatar : ユーザーのアイコン画像に。
image : 画像。あまりつかわないほうがいいかな。
img : 画像。つかわないほうがいいかな。
icon : アイコンに使用する。web fontアイコンなど。
thumb : 写真のサムネイルなど。
リンクやボタン要素で使えそうなclass名
btn : ボタン。Bootstrapがこれなので合わせたほうが無難?
button : SemanticUIのクラスはbtnではなくこちらになっています。どっちがいいのか。
テキスト要素で使えそうなclass名
description : 単語が長いのであまり使いたくない。
summary : 要約を入れるときに使う。
text : テキストを入れるときに使う。あまり使いたくない。
レイアウト要素で使えそうなclass名
layout : レイアウト。hogehogeLayoutみたいな命名にします。
ヘッダー要素で使えそうなclass名
header : ヘッダー。ページ内にheaderを含むクラスが複数存在する時代です。
フッター要素で使えそうなclass名
footer : ヘッダー。ページ内にfooterを含むクラスが複数存在する時代です。
フォーム要素で使えそうなclass名
form form要素関連
field input要素関連
radio radiobox要素関連
checkbox checkbox要素関連
submit 送信
フォームの状態で使えそうなclass名
success 成功の場合
error エラーの場合
required 必須
loading ローディング中
タイムライン要素で使えそうなclass名
stream : ストリーム
timeline : タイムライン
時間・日付要素で使えそうなclass名
time
timestamp
created
date
ユーザ要素で使えそうなclass名
profile : プロフィール
signin : ログイン
signout : ログアウト
signup : ユーザー登録
user : ユーザー
管理画面要素で使えそうなclass名
dashboard : 管理画面系などリンクのmoduleなどが多い場合
ナビゲーションやメニュー要素で使えそうなclass名
menu : メニュー。navのほうがmenuよりも大きい印象
nav : ナビゲーション
navbar : navと何がちがうのかな?
tab : タブ
エレメントレベルで意味を持っているclass名
heading : 見出し
headline : 見出し
link : リンク
list : リスト、liやiOSのUITableViewみたいもの
title : タイトル
使いたくないclass名
div : どういう役割なのかわからない
rightside : レスポンシブな昨今、デスクトップの右サイドバーは、モバイルでも右サイドバーか?という疑問が生じる
span : どういう役割なのかわからない
更に迷ったら?
スキーマの単語を使うと便利です。
http://schema.org/Thing
感想
HTMLは簡単ですが、人によってやり方が違いますね。随時更新していきたいと思います。
この記事が気に入ったらサポートをしてみませんか?