初めてCSSを書いたときにハマった話

きっかけ

業務で初めてCSSを書いたとき、なぜかわからないけど反映されずに悩んだこと。

CSSが効かない２つの罠

1. セレクタには優先度がある

CSSを書くときは以下のパターンがある。

（例）以下のdiv要素の文字に色を付ける。

<divid="id"class="class"name="name"style="color:red;">文字の色を変えるよ</div>

/*ID指定*/#id{color:blue;}/*class指定*/.class{color:green;}/*属性指定*/[name=name]{color:yellow;}/*要素指定*/div{color:white;}

何色になるかというと、、、赤色になる。
セレクタの指定方法によって優先度が変わってくることがわかる。
細かく言うとセレクタの指定ごとに点数が決められていて、計算結果で優先度が変わるらしい。

優先度は以下のようになっている

1. htmlのstyle属性
2. idセレクタ
3. classセレクタ
4. 属性セレクタ

しかし、整備したソースを書くならCSS設計規則BEMなどをの概念を参考にした方がよい。
BEMにそって書くならclassセレクタしか使わないことになる。
BEMについてはまた今度書く。

つまり

自分が書いたCSSより優先度が高いCSSがすでについている。
書いたまま反映すると思っちゃダメってこと。

2. 親要素に依存するものがある

例えば要素の位置を右上にしたいとする。
その場合、以下のように書くとする

/*対象要素のclass*/.target{position:absolute;right:0;top:0;}

このとき、このCSSは効かない。
なぜかというと、absoluteは親要素を基準とした絶対的な位置を決めるものだから。
absoluteを使うときは親要素に以下のCSSを書く必要がある。

/*親要素のクラス*/.parent{position:relative;}

つまり

CSSによっては親要素も関係してくる。
普段使わないCSSを使うときは調べたほうがよい。

最後に

自分で最初から書く場合は親要素からCSSを考えないといけないってことを学んだ。
1年ぐらい経験してやっとつけたいCSSを邪魔されずにつけれるようになった。
初めのころはIDで指定したりしてたくさん書きがちだけど、再利用できるものは再利用して行数を少なくしたほうがいい。