今までだましだまし書いてきたCSSにも限界を見せてきたのでここいらで一つ、真面目にCSSに入門してみようと思う。
という訳で現場のプロから学ぶ CSSコーディングバイブルの学習メモを書いておく
CSSって?
CSSとはカスケーディングスタイルシート(Cascading Style Sheet)の略。HTMLを装飾する役割を持つ。
CSS Working Groupのメンバーによって仕様が決められているらしい。
基本文法
HTMLにCSSを適応させるには3種類の方法を持つ。
- HTMLのstyle属性に直接CSSを置く
- HTMLのstyleタグでCSSを挟む
- linkタグのhref属性にCSSファイルを読み込ませる ←主流
文法は単純(?)
.text {
background :#ccc;
}
用語の説明
.text: セレクタ、装飾を適応したい箇所を指すbackground:: プロパティ、MDNでは
CSS のプロパティは、関連付けられた値によりブラウザーがどのように要素を表示するかを定義する特性です。
1 とある。
#ccc;: 値、まあ説明は不要だろう
キー概念
CSSを考える上で4つの概念が重要とある。
- カスケード
- 継承
- 優先度
- 詳細度
CSSで言うCascading、つまり上から下へ流れる滝のように、指定したセレクタが複数ある場合は下の行で上書きされる。
htmlタグの値は親から子へ受け継がれ、親要素で指定されている要素は継承プロパティと呼ばれる。そして、上書きされない限り子へ引き継がれる。
親子関係の例
<h2 class="title">見出し<span>サブタイトル</span></h2>
では
.title(親) > span(子)
となる
CSSを書く上で重要なのがCSS優先度。まあどの値を優先するかを決めると考えればよいだろう。
具体的な優先度はこんな感じ
優先度高
style属性
IDセレクタ
クラスセレクタ、属性セレクタ、擬似クラスセレクタ
要素セレクタ、疑似要素セレクタ
優先度低
詳細度が高いほど優先される。
セレクタ
IDセレクタ、クラスセレクタ、要素セレクタはよく見るね
CSS設計
この辺りを読みたかった。CSSのコーディングスタイルには3つ代表的なものが存在する。
- OOCSS
- BEM
- SMACSS
クラスにも代表的な指定方法が3つある。
マルチクラス、装飾や機能ごとにクラスを分ける
(Boostrapで使われる)
- ここがイイ！
再利用性が高い - ここがダメ！
styleの適応範囲が分かりにくい
シングルクラス、使用する目的に合わせてクラスを作成
- ここがイイ！
styleの適応範囲が分かりやすい - ここがダメ！
再利用性が低い
ユーティリティクラス(汎用クラス)
クラス名がCSSのプロパティを表しているクラス、(ちなみにこのブログのテーマであるkissはこのタイプを多用している。)
- OOCSS
オブジェクト指向型CSSコーディングを指す。ストラクチャ(構造)とスキン(装飾)の分離、コンテナ(場所)とコンテンツ(パーツ) - BEM
クラスの命名に厳格なルールある。複数人作業する場合はオススメ - SMACSS
CSSを5つのカテゴリーに分ける - Base
- Layout
- Module
- State
- Theme
それぞれのディレクトリ名を使う
CSSの基本
CSSを学習上で必要な知識
- セレクタ
- カスケードと継承、詳細度
- ボックスモデル
- マージンの相殺
- デフォルトスタイルシート、リセットCSS
CSSを書く上で最初にすること
テンプレート、レイアウト、コンポーネント、エレメントの定義。
とりあえずここまで。
うーんCSSは奥深いなあ