LoginSignup
67
73

More than 5 years have passed since last update.

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

Posted at

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

パッと思いつくときもあるのだが・・・。最近では思いつかなすぎて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
67
73
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
67
73