css設計が大事

idは使わない方がいい？

使わない方が良いとされる、代表的な理由はこんなところでしょう。

1ページに同じid名は1つだけしか使えず、再利用できない
classよりもidに書いたコードが優先されるので併用すると、優先度が複雑になる

マルチクラスとシングルクラス

命名規則の中でマルチクラスとシングルクラスという言葉が出てくるので、ここで解説しておきます。

マルチクラスとは1つの要素に対して、複数のclassを指定するものです。Bootstrapなんかはマルチクラスですね。後ほど紹介する、OOCSS、SMACSSもマルチクラスに分類されます。

< div class="col-md-4 text-muted bg-success"> </div>

シングルクラスとは1つの要素に対して、1,2つ程度のclassを指定するものです。後ほど紹介する、BEMはシングルクラスに分類されます。

<div class="item"></div>

クラス名にセレクタ名を使う

クラスに付けるセレクタ名に関しては基本は省略しない。

略語を使わない場合

<div class="header">
    <div class="header-body">
        <h1 class="header-title">...</h1>
        <p class="header-text">...</p>
    </div>
</div>

略語を使う場合 ( 略し方が曖昧だとクラス名が煩雑になるので注意 )

<div class="hdr">
    <div class="hdr-bd">
        <h1 class="hdr-ttl">...</h1>
        <p class="hdr-txt">...</p>
    </div>
</div>

要素名に対して装飾しない

p{
  text-align: center;
  font-size: 20px;
}

このように要素名に対してcssを書くと、全てのpタグにこの装飾が効いてしまいます。ある所では違う装飾をしたいと思ったら、それを打ち消すために要素名に対して書いたcssを上書きする必要があります。その結果、コードが複雑になり、コード量も多くなります。例えばaタグの下線を消すなど、全てに共通で効かせたいものであれば良いのですが、そうではない場合は要素名に対して直接cssを書くのは辞めた方が良いでしょう。

もちろんリセットcssなどで使うのはOKです。

できるだけ要素名を付けての指定はしない

見出しタグは入れ替わるケースがあるので、クラス名を付与して指定するようにします。
ただし、<li>タグなど毎度クラスをつけるほどのものではなかったり、<span>タグや<i>タグなどユニークなエレメントの中に存在するものは許容します。
特定の場所に依存するような記述はできるだけ避けるようにします。

良い例

.header {...}
.header-title {...}
.item-button span {...}

悪い例

div.header {...}
.header-box h1 {...}
.item dl dd a span {...}

CSSのネストは孫までにする

子孫セレクタはパフォーマンスに影響が出るが、孫までは許容はする。ただしできるだけ子までにするように心がける

良い例

.search-box-input {...}

悪い例

div.header dl dd .search-box input {...}

class名は意味のわかる英語にする

良い例

contact

main-copy

submit-btn

悪い例

otoiawase

aaa

btn1

『意味のわかる』=『セマンティックな』であり、セマンティックなclass名をつけましょう！と解説されてるサイトも多いです。

ローマ字や意味のわからない名前はやめましょう。書いてる時はよくても、後でコードをいじる際に分かりにくくなります。また、支障はなくてもカッコ悪いですよね。あーこれ作った人は適当な人だなとか、あまりスキルないんだなと思われてしまいます。

ハイフンとアンダースコアを統一する

良い例

main-copy

sub-copy

悪い例

main-copy

sub_copy

流石にこんな書き方をする方はあまりいないような気もしますが…
ハイフンとアンダースコアを混同させるのは良くないです。

htmlに依存しない書き方をする

例えば下記のようなコードがあるとします。

.contact >  div >  div{ ... }

今は問題なくても、今後htmlの修正があった際にこの書き方だとcssも修正しないといけなくなる可能性があります。そのような書き方は避けるべきです。

命名規則ではないけどインデントや改行は統一する

統一感のある書き方をすることも大切です。とにかく綺麗に見やすく！

例えば下記のようなコードは汚くて良くないです。改修案件ではこんなコード良く見ます。

.kv-logo {
  width: 200px;
}
.kv-main-copy{
  font-size: 30px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20px;

}

.kv-sub-copy{
  font-size: 20px;
color: #666;
}

統一感を持って下記のようにすると良いでしょう。

.kv-logo{
  width: 200px;
}

.kv-main-copy{
  font-size: 30px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.kv-sub-copy{
  font-size: 20px;
  color: #666;
}

インデントや改行は揃っていれば特に絶対こうしなくてはいけないといったことはないです。また、marginなどの余白も常に下につけるなど、自分でルールを決めておくことも大切です。

OOCSS

OOCSSはObject Oriented CSSの略で、オブジェクト指向にもとづいたcss設計です。

開発者のNicole Sullivan氏は『レゴの集まりで考えよ』と言っています。レゴのパーツのようにガッチャンガッチャンとはめていくイメージです。

class名の命名規則

OOCSSでは

構造(structure)と見た目(skin)
コンテナ(container)とコンテンツ(contents)

を分けて考えます。

使用例

<div class="nav-links">
  <a href="#" class="link link-blue">前の記事</a>
  <a href="#" class="link link-red">次の記事</a>
</div>
 

.link{
  width: 200px;
  height: 60px;
  line-height: 60px;
}

.bg-blue{ 
  background-color: #00f; 
  color: #fff; 
}

.bg-red{ 
  background-color: #f00; 
  color: #fff; 
}

構造：link
見た目：link-blue / link-red
コンテナ：nav-linksのついたdivタグ
コンテンツ：linkのついたaタグ

となっています。

コンテナとコンテンツの分離がわかりにくいので、補足すると。

コンテナとコンテンツを分離していないcssの書き方

.nav-links a{
  width: 200px;
  height: 60px;
  line-height: 60px;
}

コンテナとコンテンツを分離したcssの書き方

.link{
  width: 200px;
  height: 60px;
  line-height: 60px;
}

分離している方は使用する場所を限定されていないことがわかると思います。分離していない方はnav-linksの子要素に限定されてしまいます。
OOCSSではこのように使用する場所を限定される書き方はNGです。場所を限定させないために、コンテナとコンテンツは分離します。

OOCSSは再利用性を意識した設計です。この考え方はコード量が少なくて済み、class名もシンプルで良いのですが、cssを変更した際にページをまたいで複数箇所に影響するので、その影響範囲を把握しにくくなります。

命名規則をちゃんと意識するのは、基礎的なことがある程度出来てからでOKです。htm,cssの勉強中の方は、命名規則なんてものがあるんだと頭に入れておいて、いずれ勉強すれば良いと思います。