コーディングの効率化を極めるためのテクニック
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セレクタ名の付け方
ファイル名を見たときに推測できる、規則性のあるセレクタ名をつけると、探すのに時間がかかることもなくなります。
一般的には、英訳した名前をつけます。
または、２つの言葉を『－（ハイフン）』つなぎ、『＿（アンダーバー）』つなぎ、『キャメルケース』など。
①ハイフン式 ex/global-nav （単語間をハイフンでつなぐ）
②アンダーバー式 ex/global_nav （単語間をアンダーバーでつなぐ）
③キャメルケース ex/globalNav （２単語目の先頭文字のみ大文字）
ページ全体の外枠 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
↑記したものは一般的に使用頻度の高いセレクタ名の一部です。
自分なりに理解しやすく、一緒に仕事を組んでいる中のルールなどを守ってコーディングしていくことが大事です。