前提
css初心者が最低限知っておくべきルールや書き方をまとめてみました。
順番によるcssの優先度（CSSファイル内）
.hoge {
font-size: 10px;
}
.hoge {
font-size: 20px;
}
上記のように同じクラス名に、同じプロパティに値を指定した場合、下のfont-size: 20px;が反映されます。cssファイルは上から順に呼ばれ、下に行くほど同じものがあった場合上書きされるので、優先度は下のものの方が高いのです。
順番によるcssの優先度（htmlファイル内）
<div class="hoge fuga">
hogehoge
</div>
.hoge {
font-size: 10px;
}
.fuga {
font-size: 20px;
}
上記のような場合、fugaクラスのfont-sizeが優先されます。htmlファイル内も上から下へ読み込まれるため、hogeクラスよりfugaクラスで定義されている内容の方が優先され、上書きされます。
全体的な優先度
cssでは、以下のような優先度があります。これらの順番を頭にいれたうえで、cssを書いていく必要があります。
<高>
・!important
・インライン記述（htmlファイル内への記述）
・IDセレクタ
・クラスセレクタ
・要素セレクタ
・ユニバーサルセレクタ
<低>
!important
cssファイル内で使用するもので優先度として一番高いものです。
.hoge {
margin: 10px !important;
}
ただし、この方法はあまりお勧めしません。もしも、こういった指定の仕方があちこちでされていたら、自分以外の他者がcssをあてようした場合、必ず効かずに原因を探るためのロスタイムが生まれます。大きなサイトになるほど、それは複雑化し、探すのでさえ一苦労となるため、優先度は下のものから指定するべきでしょう。
インライン記述（htmlファイル内への記述）
こちらは、htmlファイル内で、style属性を使用し、cssを当てる方法です。
<div style="margin-bottom: 10px;">
hogehoge
</div>
こちらもあまりお勧めできる方法ではありません。チームで管理していくうえで、htmlはhtmlファイル内で、cssはcssファイル内で管理するべきでしょう。どこで何を定義しているかわからないことほどチーム内で他者に迷惑をかけることはありません。
IDセレクタ
#hoge {
font-size: 10px;
margin-bottom: 10px;
}
IDはhtml内で一度のみ使用することができるものです。よって、cssにおいても、複数使用できるクラスよりもIDの方が優先度が高いのです。ただし、こちらもあまりお勧めできません。昨今のリッチなサイトが多数をしめる現状をみると、IDはjavascriptを呼ぶために使われていることが多数あり、html内で定義したIDがjavascriptを定義するためのものなのか、cssを定義しているものなのか一目では判断がつきません。必要以上に他者に悩ませないためにもIDはあまり使用するべきではないでしょう。
クラスセレクタ
htmlにclass属性で定義し、cssに書く一般的な方法
<div class="hoge">
hogehoge
</div>
.hoge {
font-size: 10px;
}
この方法が一番一般的に使用されており、かつ管理もしやすいものでしょう。特別な理由がない限り、この方法でcssを定義していくのがベストといえます。
要素セレクタ
要素に対して直接cssをかける方法です。
p {
margin-bottom: 10opx;
}
要素に対して、直接かけるため影響範囲は広いですが、IDやクラスなどより限定的にかける方法よりは優先度は下です。
ユニバーサルセレクタ
すべてのものにcssをかける方法
* {
margin: 10px;
padding: 10px;
}
*を使用することで、サイトすべてのcssを定義することができます。優先度は一番下ですが、特に指定をしなかった場合、こちらの要素がすべてに対して適用されるので、注意すべきです。こういった方法で一番使用するのは、reset.cssなどでしょうか。気になった方は調べてみてください。