cssのクラス名規則・コーディングルールは最低限のみ覚えよ！

web制作会社で仕事すると、注意されるのがcssのクラス名の命名規則・コーディングルールです。まずは、web制作会社にどんな規則があるか聞き、それ以外は最低限のcssのクラス名の命名規則・コーディングルールのみ覚えておきましょう。気にしすぎても本末転倒だからです。

ゴロニャン

クラス名の命名規則とか覚えるのめんどくさい！

最低限押さえておくべきクラス名の命名規則のみ紹介するよ！

ニャンニャン

cssのクラス名の規則、コーディングルールは注意される？

cssのクラス名の規則、コーディングルールを守っていないと注意されることがあります。

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

web制作会社でcssのクラス名の命名規則は制作会社や、案件ごとに違う場合があるので、最初に確認しておいて手戻りが発生しないようにしましょう。

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

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

<section class="result">
<div class="result-ttl">
</div>
</section>

</div>

</section>

stylesheetへの記述量を極力減らしましょう。

sassはcssを早く書く記述方法で、web制作会社だとsassでの表記が必須です。覚えることは3つだけですぐ仕事で使えるレベルになります。

sassコーディングの勉強/参考書は不要。最低限覚えることは3つだけ

シングルクラスで書くことで記述を減らしましょう。こうすると、例えば「result」というセクション名が変更になっても後から修正が楽です。

.result {
    &-ttl {

    }
}

.result {

&-ttl {

}

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

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

.result-ttl{}

.result-txt{}

.result-contents{}

.result-bg{}

.result-img{}

.result-ttl{}

.result-txt{}

.result-contents{}

.result-bg{}

.result-img{}

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

.result_ttl.jpg
.result_txt.jpg

1 2	.result_ttl.jpg .result_txt.jpg

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

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

web制作会社で仕事すると、注意されるのがcssのクラス名の命名規則・コーディングルールです。

まずは、web制作会社にどんな規則があるか聞き、それ以外は最低限のcssのクラス名の命名規則・コーディングルールのみ覚えておきましょう。

あまり気にしすぎても本末転倒だからです。