HTML
CSS

HTML/CSSのクラス名に迷ったら

More than 1 year has passed since last update.

ボキャプラリのないわたしはコーディングをしていて、クラス名を考えている時間が長い。それはもう長い。

パッと思いつくときもあるのだが・・・。最近では思いつかなすぎてhogeやらfugaやら、連番やらとりあえずつけておき、良いクラス名を思いついたら変更するみたいなこともやったが、hogegegegegegeとなったので控えようと思った。

sassなんか使っていると普通にネストしたくなる。
でもなんだかんだ(ほぼ)全ての要素にclass名をつけた方がメンテナンス性が高いことはカラダがわかっている。

クラス名を考えるだけの時間・・・なんとか削減できないかと思い、汎用的に使えるクラス名をまとめてみた。

汎用クラス名

※重複あり

レイアウト

  • container
  • wrapper
  • wrap
  • header
  • footer
  • section
  • sec
  • content
  • body
  • inner
  • column
  • col
  • block
  • grid
  • row
  • list
  • sidebar
  • main
  • sub

モジュール

  • nav
  • article
  • list
  • form
  • box
  • item
  • button
  • alert

エレメント(モジュールのパーツ的な)

  • header
  • footer
  • body
  • row
  • col
  • core
  • title
  • headline
  • heading
  • hdl
  • ttl
  • text
  • txt
  • description
  • dsc
  • name
  • date
  • time
  • data

ステート(状態的な)

  • error
  • open
  • close
  • normal
  • primary
  • stop
  • round
  • current
  • cur
  • active
  • activate