Web制作会社で仕事すると、注意されるのがCSSのクラス名の命名規則・コーディングルールです。
まずは、Web制作会社にどんな規則があるか聞き、それ以外は最低限のCSSのクラス名の命名規則・コーディングルールのみ覚えておきましょう。
気にしすぎても本末転倒だからです。
ゴロニャン
ニャンニャン
目次
CSSクラス名規則・コーディングルールとは
そもそも何のこと？
- コードの書き方
- CSSのクラス名の付け方
- 画像ファイルの名前の付け方
などのことです。
なぜ必要？
わかりやすいコードを書くことで、自分も、自分のソースコードを後でいじる人もメンテナンスしやすくなるからです。
後で完成したコードを読んで「ぐちゃぐちゃ！修正したい部分がどこなのかわからん！」ということを防ぎます。
また、制作会社の場合は、もともとルールを決めていて、それをみんなが守ることでフリーランスに外注しても、後でメンテナンスがしやすくなります。
どんな場合必須？
特に制作会社の案件で必須です。
CSSのクラス名の規則、コーディングルールを守っていないと注意されることがあります。
ただし、それ以外の案件でも、やっておくと自分でもメンテナンスしやすくなるので、オススメです。
まず最初にやることは？
まずは着手前に必ず制作会社にどんな命名規則があるか確認しましょう。
命名規則は制作会社や、案件ごとに違う場合があるので、最初に確認しておいて手戻りが発生しないようにしましょう。
CSSのクラス名の規則・コーディングルール最低限
各要素のclass名は最初にセクション名をつける
例えば、以下のように、mvセクションの中身は「mv-XX」という名前にしましょう。
こうすることで、そのクラス名がどこのセクションのものなのか一気にわかりやすくなります。
|
1 2 3 4 |
<section class="mv"> <div class="mv-ttl"> </div> </section> |
効率的な書き方をする
効率的な書き方をしてミスを減らしましょう。
- Sassで表記
- 極力シングルクラスで記述
Sassで表記する方法
SassはCSSを早く書く記述方法で、Web制作会社だとSassでの表記が必須です。覚えることは3つだけですぐ仕事で使えるレベルになります。
シングルクラスとは
シングルクラスとは、HTMLの要素にクラス名を1つのみつけるということです。
逆にマルチクラスは複数のクラス名をつけるということです。
シングルクラスはスタイルの適用範囲がわかりやすいというメリットがあります。
例えば、クラス名.mv-ttlの範囲は「ここ」という部分を見ればOKだとわかります。
クラスが複数あると、見るポイントが多くなってしまいます。
|
1 2 3 4 5 |
.mv { &-ttl { //ここ } } |
クラス要素の名前は決めておく
classの要素の名前は例えば以下のように決めておき、すぐわかるようにましょう。
- タイトル：ttl
- テキスト：txt
- 背景画像：bg
- 画像：img
例えばresultセクションで使うclassの場合、以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.mv { &-ttl { } &-txt { } &-bg { } &-img { } } |
画像ファイルも最初にセクション名をつける
class名だけではなく画像ファイル名もセクション名-XXXなどのようにして、どの部分の画像なのかわかりやすく表記しましょう。
|
1 2 |
.mv_img1.jpg .mv_img2.jpg |
アンダースコアかハイフンか確認する
アンダースコア「_」か、ハイフン「-」か、class名のルールを確認しましょう。
例えばCSSの場合はハイフン「-」、phpの場合はアンダースコア「_」などのルールがあることがあります。
CSSのクラス名規則・コーディングルールまとめ
Web制作会社で仕事すると、注意されるのがCSSのクラス名の命名規則・コーディングルールです。
まずは、Web制作会社にどんな規則があるか聞き、それ以外は最低限のCSSのクラス名の命名規則・コーディングルールのみ覚えておきましょう。
あまり気にしすぎても本末転倒だからです。
Sassをしたことがない人は、Sassの勉強もしてみてください！
