コーディングの効率化を極めるためのテクニック
cssの書き方
ex/<h1 class="foo">見出し</h1> ➡ h1 .foo { color:#ff0000; }
ex/<h1 id="foo">見出し</h1> ➡ h1 #foo {color:#ff0000; }
*要素名は省略可(省略した場合は汎用 classとなる)。要素名付きの場合は、特定要素内でのみ使用可。
*ID属性による名称はページの中で固有のものでなければならない(id="foo"が複数回出てくるソースの書き方は文法違反)
*複数のセレクタをカンマでつなげることで、同じスタイルを一括指定できる
優先される順番
基本的には、以下のものが優先される
・後から記述されたもの
・タグ< class < id
・外部参照<内部参照<インライン指定
・子孫セレクタなど、複数のセレクタで詳細度の高いもの
・!importantを使う(最優先) ※ただし、乱用はNG!
CSSセレクタ名の付け方
ファイル名を見たときに推測できる、規則性のあるセレクタ名をつけると、探すのに時間がかかることもなくなります。
一般的には、英訳した名前をつけます。
または、2つの言葉を『-(ハイフン)』つなぎ、『_(アンダーバー)』つなぎ、『キャメルケース』など。
①ハイフン式 ex/global-nav (単語間をハイフンでつなぐ)
②アンダーバー式 ex/global_nav (単語間をアンダーバーでつなぐ)
③キャメルケース ex/globalNav (2単語目の先頭文字のみ大文字)
ページ全体の外枠 ex/ container / wrapper / wrap
グローバルナビゲーション(ホーム、お問い合わせなどのリストボタン部分) ex/gnav / global-nav
メイン写真 ex/mainvisual /keyvisual
検索ボックス ex/search / search-box / search-area
背景画像 bg
ボタン btn
アイコン ico
画像 img
写真 ph
イラスト ill
図版 fig
バナー画像 bnr
テキスト txt
パーツ prts
見出し画像 hdg
↑記したものは一般的に使用頻度の高いセレクタ名の一部です。
自分なりに理解しやすく、一緒に仕事を組んでいる中のルールなどを守ってコーディングしていくことが大事です。