web制作会社で仕事すると、注意されるのがcssのクラス名の命名規則・コーディングルールです。まずは、web制作会社にどんな規則があるか聞き、それ以外は最低限のcssのクラス名の命名規則・コーディングルールのみ覚えておきましょう。気にしすぎても本末転倒だからです。
ゴロニャン
ニャンニャン
目次
cssのクラス名の規則、コーディングルールは注意される？
cssのクラス名の規則、コーディングルールを守っていないと注意されることがあります。
まずは着手前に必ず制作会社にどんな命名規則があるか確認しましょう。
web制作会社でcssのクラス名の命名規則は制作会社や、案件ごとに違う場合があるので、最初に確認しておいて手戻りが発生しないようにしましょう。
cssのクラス名の規則・コーディングルールは最低限これだけ押さえておくべき
各要素のclass名は最初にセクション名をつける
例えば、以下のように、resultセクションの中身は「result-XX」という名前にしましょう。
こうすることで、そのクラス名がどこのセクションのものなのか一気にわかりやすくなります。
1 2 3 4 | <section class="result"> <div class="result-ttl"> </div> </section> |
記述量は極力減らす
stylesheetへの記述量を極力減らしましょう。
- sassで表記
- 極力シングルクラスで記述
sassで表記する方法
sassはcssを早く書く記述方法で、web制作会社だとsassでの表記が必須です。覚えることは3つだけですぐ仕事で使えるレベルになります。
シングルクラスで記述する方法
シングルクラスで書くことで記述を減らしましょう。こうすると、例えば「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の場合はアンダースコア「_」などのルールがあることがあります。
cssのクラス名規則・コーディングルールは最低限のみ覚えよ！まとめ
web制作会社で仕事すると、注意されるのがcssのクラス名の命名規則・コーディングルールです。
まずは、web制作会社にどんな規則があるか聞き、それ以外は最低限のcssのクラス名の命名規則・コーディングルールのみ覚えておきましょう。
あまり気にしすぎても本末転倒だからです。
