制作会社で注意されるclass名ルール。とりあえずこれだけ押さえよう

制作会社で仕事すると、注意されるのがクラス名の命名規則です。

わかりにくいものを書いていると、クラス名の書き直しなどということもあり得ます。

今回は最低限押さえておくべきクラス名の命名規則について紹介します。

制作会社で注意されるclass名ルール

1.まずは制作会社に必ずclass名ルールを確認する

まずは着手前に必ず制作会社に命名規則があるか確認しましょう。

2.最低限押さえておくべきclass名ルール

1.各要素のclass名は最初にセクション名をつける

例えば、以下のように、resultセクションの中身は「result-XX」という名前にしましょう。

こうすることで、そのクラス名がどこのセクションのものなのか一気にわかりやすくなります。

2.css記述は極力減らす

例えば、以下のように、

・scssで表記で、

・極力シングルクラスで記述できるように

記述を減らしましょう。

3.class要素の名前は決めておく

classの要素の名前は例えば以下のように決めておき、すぐわかるようにましょう。

• タイトル：ttl
• テキスト：txt
• コンテンツの内容：contents
• 背景画像：bg
• 画像：img

例えばresultセクションで使うclassの場合、以下のようになります。

4.画像ファイルも最初にセクション名をつける

class名だけではなく画像ファイル名もセクション名-XXXなどのようにして、どの部分の画像なのかわかりやすく表記しましょう。

5.アンダースコアかハイフンか

アンダースコア「_」か、ハイフン「-」か、class名のルールを確認しましょう。

例えばcssの場合はハイフン「-」、phpの場合はアンダースコア「_」などのルールがあることがあります。