コーディングしていると都度、idやクラス名を決める必要があり悩んでしまうという人も多いのではないでしょうか?
あらかじめクラス名の付け方のルールが決まっている場合はそれを守ればよいと思いますがルールがない場合にはある程度、自分のなかでルール化しておくとコーディングもはかどると思います。
idやクラス名を決めるだけで悩んでしまい時間がかかってしまったらもったいないのでcss命名規則の参考を紹介していきたいと思います。
もちろん参考にしても良いですし自分ならこのクラス名のほうがわかりやすいなどあればそちらを使ったらよいと思います。
cssの命名規則
囲み
| クラス名 | 省略 | 意味 |
| main | メイン | |
| common | 共通 | |
| box | 囲み | |
| wrap | 包む | |
| inner | 内面 | |
| area | 範囲 | |
| content | コンテンツ | |
| column | col | カラム、縦列 |
| breadcrumb | ぱんくず | |
| menu | メニュー |
パーツ
| クラス名 | 省略 | 意味 |
| item | 項目、アイテム | |
| text | txt | テキスト |
| thumbnail | thumb | サムネイル |
| overlay | 上に置く | |
| button | btn | ボタン |
| banner | bnr | バナー |
| title | ttl | タイトル |
| table | tbl | テーブル |
| category | cat | カテゴリ |
| brand | ブランド |
動作系
| クラス名 | 省略 | 意味 |
| open | 開く | |
| close | 閉じる | |
| current | 現在 | |
| active | アクティブ、有効 | |
| disabled | 無効 |
最後に
クラス名などでよく使うものをピックアップさせてもらいました。
よく使うけど毎回調べたり悩んだりすると時間が勿体ないので僕は自分のなかでクラスの命名規則をまとめていつでも使えるようにしています。
余計な時間を省くことがコーディングの効率化にもつながると思います。


コメント