写真：http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:SumaRikyu_Cascade.jpg

普段CSSって言葉をWEBデザイナーの方や制作者の方々は使うと思います。カスケーディング(カスケード)・スタイルシート(CSS)を略したいいかたです。
一般的にはスタイルシートとかCSSっていいますが、その意味についての事です。

スタイルシートって聞いてイメージすること

スタイルシートと聞けば、スタイル(装飾)をするシート(ファイル)などと頭の中でイメージが湧くと思います。ではカスケーディングってなんでしょう？

カスケーディングって何？

CSSを使う上ではこの言葉は重要です。知らないで使っている人もいると思います。実際にどんな説明が多いか見てみましょう

なんかしっくりこないというかわかりづらいです。
僕自身調べていて上記の説明を見ても言っていることはわかるけども納得できるものではなかったです。ある書籍を読んでいたらこんな事が書いてありました。

なるほど。って思いました。CSSを書いたことある人はこの文をみればあーなるほどねって思うかとおもいます。

p{
color:red;
}

p{
color:bule;
}

<p>に対する『赤』と『青』という二つのスタイルの指定から、『青』の指定が選択され、文字色は『青』になります。カスケーティングでは次の3つのルールによって選択するスタイルが導き出されます。

ルール1・スタイルシートの優先度

CSSには優先度があり、優先度の高いスタイルの内容がカスケーディングにより選択されます。優先度は以下のようになります。(上から順に優先度が高い)

p{
color:red!important;
}

!important 宣言による優先度の底上げ

!important 宣言は詳細度や並び順などのカスケーティングのルールを無視して、強制的に選択させることができる。
便利に思えるでしょうがこの方法を使うと他のカスケーティングのルールを使用してスタイルの上書きすることができないというデメリットがります。

ルール2・セレクタによる詳細度

スタイルシートの優先度が同じ場合、詳細度の高いスタイルが選択される。詳細度が最も高いCSSはstyle属性に記述されたスタイルになります。

style属性以外に記述されているスタイルでは、セレクタに含まれる特定セレクタ数により詳細度が決まる。セレクタで詳細度が最も高いのはIDセレクタの数が多いセレクタになります。

IDセレクタの数が多いセレクタでの指定が採用される
#bar p#foo{
color:red;
}

p#foo{
color:bule;
}

セレクタに含まれるIDの数が同じ場合は、クラスセレクタ、属性セレクタ、疑似クラスセレクタの数により詳細度がきまる↓

IDセレクタの数が同じ場合は、クラスセレクタの数が多い方が採用される。
.bar p#foo{
color:red;
}

p#foo{
color:bule;
}

IDセレクタ、クラスセレクタ、属性セレクタ、疑似クラスセレクタの数が同じ場合は、要素セレクタの数が多いセレクタが優先される↓

p#foo{
color:red;
}

#foo{
color:bule;
}

ルール3・プロパティの並び順

スタイルシートの優先度とセレクタの詳細度が等しい場合、後に書いた記述が採用されます↓

p{
color:red;
}

p{
color:bule;
}
後に書いた記述が採用される

まとめ

カスケーティングでは、優先度、詳細度、並び順の3つのルールから要素に適用するスタイルが算出されます。実際にコーディングしているとこれらを意識しなくてはいけない局面がでることが全くないとは言えないと思います。

コーディングルールやコーディング規約を作成して、カスケーティングを意識せずにCSS設計できると望ましいですよね。頑張っていきたいですね。経験しかこういうのはないと思います。