この記事で解決できるお悩み
・どんなclass名を付けたらいいかわからない
・class名を付けるときいつも悩んでしまう
はじめに
クラス名ってなににしようか迷いますよね…
学習を始めたばかりの人はあまり気にせず適当なclass名でもOKですが、本格的にコーディングをするようになると誰もがぶち当たる壁
それがclass名どうしよう問題です。
class名がなかなか決まらなくて時間がかかってしまうなんて人もいると思います。
学習を始めたばかりの人はあまり気にせず適当なclass名でもOKですが、本格的にコーディングをするようになるとclass名がなかなか決まらなくて時間がかかってしまうなんて人もいると思います。
そんな方に向けてよく使われるclass名と命名のポイントを解説していきます。
class名を付ける際のポイント
予測しやすいclass名を付ける
まずclass名を付けるときに大事なのが、class名を見ただけでどの部分の何に対して指定しているのかが、ある程度予測できることです。
修正が必要になって見返した際に、class名を見れば「だいたいこの辺かな？」と予測できるような名前にしましょう。
規則性を持たせる
具体的な名前にすることで、コードの理解とメンテナンスが容易になります。
規則性ある名前にすることで、統一性のあるコードを書くことができます。
注意点
- 1文字目に数字や記号は使用できないので必ずアルファベットから始める
- ひらがな、カタカナ、漢字、全角英数字は使用できない
- 別のクラス名と認識されてしまうためスペースは使用しない
- 「-（ハイフン）」、「_（アンダースコア）」以外の記号は使用できない
よく使用するclass名一覧
下記の表にclass名でよく使用する表現をまとめたので参考にしてみてください。
大枠
| container | 全体を囲むもの |
| wrapper | 包むもの |
| global | 全体の |
| main | メイン |
| sub | サブ |
| outer | 外側 |
| inner | 内側 |
| area | エリア |
| section | 区分け |
| article | 記事 |
要素
| title | タイトル |
| logo | ロゴ |
| item | 項目 |
| list | リスト |
| copy | キャッチコピー |
| img | 画像 |
| news | お知らせ |
| category | カテゴリー |
| btn | ボタン |
| detail | 詳細 |
| table | 表 |
| text | 文章 |
| link | リンク |
| contact | お問い合わせ |
最後に
class名は、本格的にコーディングをするようになると誰もが一度は直面する問題です。
class名がなかなか決まらなくて時間がかかってしまうなんてもったいないのです…
・どんなclass名を付けたらいいかわからない
・class名を付けるときいつも悩んでしまう
こんなお悩みを感じている方は、ぜひ今回紹介した内容を覚えておいてください。
コメント