【命名規則】idやクラス名で悩んだときの参考まとめ

スタイルシート/CSS

コーディングしていると都度、idやクラス名を決める必要があり悩んでしまうという人も多いのではないでしょうか?

あらかじめクラス名の付け方のルールが決まっている場合はそれを守ればよいと思いますがルールがない場合にはある程度、自分のなかでルール化しておくとコーディングもはかどると思います。

idやクラス名を決めるだけで悩んでしまい時間がかかってしまったらもったいないのでcss命名規則の参考を紹介していきたいと思います。

もちろん参考にしても良いですし自分ならこのクラス名のほうがわかりやすいなどあればそちらを使ったらよいと思います。

cssの命名規則

囲み

クラス名省略意味
mainメイン
common共通
box囲み
wrap包む
inner内面
area範囲
contentコンテンツ
columncolカラム、縦列
breadcrumbぱんくず
menuメニュー

パーツ

クラス名省略意味
item項目、アイテム
texttxtテキスト
thumbnailthumbサムネイル
overlay上に置く
buttonbtnボタン
bannerbnrバナー
titlettlタイトル
tabletblテーブル
categorycatカテゴリ
brandブランド

動作系

クラス名省略意味
open開く
close閉じる
current現在
activeアクティブ、有効
disabled無効

最後に

クラス名などでよく使うものをピックアップさせてもらいました。

よく使うけど毎回調べたり悩んだりすると時間が勿体ないので僕は自分のなかでクラスの命名規則をまとめていつでも使えるようにしています。

余計な時間を省くことがコーディングの効率化にもつながると思います。

コメント

タイトルとURLをコピーしました