CSS基礎

CSSとはCascading Style Sheetsの略でWebページのスタイルを指定するための言語です。

基本的に以下のように記述します。

1
2
3

セレクタ {
  プロパティ: 値;
}

複数のセレクタを指定する場合は「,」で区切って記述します。

1	セレクタ, セレクタ

記述方法はとても簡単だとおもいます。
ですがCSSは他の言語と同様にコードの上から下へ向かってブラウザが読み込みます。

その為後に書かれたコードが優先されます。

セレクタ強度について

セレクタの指定方法でCSS優先度が違います。

セレクタ強度　＝　CSS優先度

以下のコードで文字色を指定する場合の上からセレクタ強度が高い順にかいていきます

HTML

1
2
3

<div id="changeBox">
  <p class="text">テキスト</div>
</div>

CSS

#changeBox .text {
  color: red;
}

div .text {
  color: blue;
}

.text {
  color: yellow;
}

div p {
  color: green;
}

p {
  color: black;
}

このような順番で強度が決まってきます。

強い強度にするとパーツの汎用性が低くなりCSSが膨大になります。
逆に低くしすぎるとCSSが他のCSSによって汚染されてしまいます。
じゃあどうするのか？

それでもCSS汚染することがあるので、
CSSの設計は念入りにする。

セレクタ強度の重要性は分かったと思います。
それではプロパティはどうでしょうか？
プロパティは表示に関係しています。
そのため書く順番を意識することで、表示に影響します。

CSSのコードは上から下に読まれます。
そのとき以下のようなコードだと論理上どう表示されるでしょう。

a {
  background-image: url(hoge.png);
  color: red;
  margin: 10px;
  display: block;
}

このコードはまず最初に「bacground-image」が指定され、
次に「color」「margin」「display」という順に設定されています。

回線速度が遅い環境では表示が一瞬でも崩れる可能性があります。
なぜな実際ブラウザ側では以下のように設定しているからです。

背景の画像取得 => 背景の画像表示 => テキストの色を設定 => 要素のマージン設定 => 要素をblockに設定

そのことを考え、私は以下のような順番でプロパティを書いています。

最低限表示が崩れないように考えこのような順番にしています。

各詳しいプロパティは以下にを参照ください。

私たちにとって表示崩れやホワイトバック（白い状態が続くこと）は致命的なバグです。
完全に起こさないことは難しいためバグを減らすためにこの順番で書くことを私は推奨します。

ちなみに自分の任意の順番を意識したり人に伝えたりするには少し時間がかかります。
そこでCSScombというツールを使用すると自動的に自分が決めたルールにしたがい整形してくれます。
しかもタスクランナーにプラグインとしてあるのでSASS等をビルドする時組み込むと便利です。