カテゴリー: コーディング

管理しやすいcssを記述するうえで必要なのは、
コンテナーとコンテンツを分離は場所に依存しないセレクタを書くことです。

サイトのロゴやバナーなど、ヘッダーやフッター、コンテンツエリアで渡って使われることのあるオブジェクトの場合、#headerなどのコンテナーと切り離して記述したほうが良いです。

header .logo{
    width:200px;
    height:50px;
}

フッターにもロゴが必要になった場合

footer .logo{
    width:200px;
    height:50px;
}

上記のようになると、ヘッダーやフッタのロゴに対して指定することになってしまうので、logoというパーツとして

.logo{
    width:200px;
    height:50px;
}

という風にすれば、ヘッダーやフッターという場所に関係なく、修正も必要がなくなります。
場所に依存しないようにパーツ化してcssを記述することが拡張性の高いcssを書く上でのポイントとなります。

なので、フッターだけロゴサイズを小さくしたい場合

footer .logo{
    width:150px;
}

ではなく、新しい定義として、

.small-logo{
    width:150px;
}

として、場所に依存しないようにしてやることが望ましいでしょう。