1.セレクタとは
セレクタは、
要素やその他を選択して
CSSプロパティ値を適用する
HTML要素を伝えるものです。
セレクタとは、要素やその他を選択してCSSプロパティ値を適用するHTML要素を伝えるものです。
セレクタと宣言ブロックとを組んだ物を、規則セットと呼びます。
言い方を変えると、セレクタとは宣言ブロックと要素とを紐づける物です。
選択札，選択紐と訳せるのかなと思います。
2.基本方針
FLOCSS というCSS設計を参考にします。BEM記法も参考にします。
FLOCSS を参考にするので、詳細度は出来るだけ同じにする。
IDセレクタ, 属性セレクタは非推奨とし、属性セレクタは属性値をコンテンツとして用いる時の確認用と限定して用いる事とする。
疑似要素の使用は可とする。
擬似クラスは非推奨とし、クラスセレクタで代用する。代用が不可能な場合のみ使用を可とする。
要素(タイプ)セレクタは、リセットCSS などで用いるのは可であるが、レイアウトレイヤーとして指定する場合は、クラスセレクタとする。
- BEMは、CSS設計の一つです。
- FLOCSSは、CSS設計の一つです。
- MindBEMdingは、BEMをCSSのクラス名に適用するために作られた命名規則です。
3.レイヤー
| 接頭辞 | 意味 |
|---|---|
| .l- | レイアウトレイヤー。 |
| .c- | コンポーネントレイヤー。 |
| .p- | プロジェクトレイヤー。 |
| .u- | ユーティリティレイヤー。 |
| .f- | ファウンデーションレイヤー。 |
FLOCSS というCSS設計を参考にします。
4.BEM記法
| 接続辞 | 意味 |
|---|---|
| __ | (アンダーバー)。エレメント。 |
| -- | (ハイフン)。モディファイ。 |
BEM記法を参考にします。
例: .l-section01--serecounter