68
73

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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
68
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
68
73

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?