見出し画像

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は簡単ですが、人によってやり方が違いますね。随時更新していきたいと思います。


この記事が気に入ったらサポートをしてみませんか?