web制作会社で仕事すると、注意されるのがcssのクラス名の命名規則です。わかりにくいものを書いていると、文句言われることもあり得ます。
ゴロニャン
クラス名の命名規則とか覚えるのめんどくさい！
最低限押さえておくべきクラス名の命名規則のみ紹介するよ！
ニャンニャン
目次
cssのクラス名の命名規則はweb制作会社で注意されることもある！
まずは着手前に必ず制作会社にどんな命名規則があるか確認しましょう。
web制作会社でcssのクラス名の命名規則は制作会社や、案件ごとに違う場合があるので、最初に確認しておいて手戻りが発生しないようにしましょう。
cssのクラス名の命名規則は最低限これだけ押さえておくべき
各要素のclass名は最初にセクション名をつける
例えば、以下のように、resultセクションの中身は「result-XX」という名前にしましょう。
こうすることで、そのクラス名がどこのセクションのものなのか一気にわかりやすくなります。
1 2 3 4 | <section class="result"> <div class="result-ttl"> </div> </section> |
記述量は極力減らす
stylesheetへの記述量を極力減らしましょう。
・scssで表記で、
・極力シングルクラスで記述できるように
記述を減らしましょう。こうすると、例えば「result」というセクション名が変更になっても後から修正が楽です。
1 2 3 4 5 | .result { &-ttl { } } |
クラス要素の名前は決めておく
classの要素の名前は例えば以下のように決めておき、すぐわかるようにましょう。
- タイトル：ttl
- テキスト：txt
- コンテンツの内容：contents
- 背景画像：bg
- 画像：img
例えばresultセクションで使うclassの場合、以下のようになります。
1 2 3 4 5 6 7 8 9 | .result-ttl{} .result-txt{} .result-contents{} .result-bg{} .result-img{} |
画像ファイルも最初にセクション名をつける
class名だけではなく画像ファイル名もセクション名-XXXなどのようにして、どの部分の画像なのかわかりやすく表記しましょう。
1 2 | .result_ttl.jpg .result_txt.jpg |
アンダースコアかハイフンか確認する
アンダースコア「_」か、ハイフン「-」か、class名のルールを確認しましょう。
例えばcssの場合はハイフン「-」、phpの場合はアンダースコア「_」などのルールがあることがあります。
