セクション構造と命名規則

職業訓練時代コーディングした時に、ボックスモデルとclassの命名については散々迷って悩みました。今回しっかり学習して、スムーズにコーディング出来るようになりたいです。そのために学んだ事をここに書いていきます。

● デザインカンプからしっかりボックスモデルを考える。
● デザインの共通を見極める。
・共通で使えそうなデザインのときは汎用的なclass名。
　　　→ section,button,content etc...
           →○○_wrapper,○○_inner（内箱）etc...
　　　○○親要素を引き継ぐとわかりやすい。
例）|　<section class="content">
　　|       <div class="content_wrapper"></div>
　　|　   <div class="content_inner"></div>
　　| 　</section>　　  etc...　　　

●レイアウトとスタイルでclass名を変える。構造と見た目の分離。
●使いたいclass名
　　　card,thumbnail,clumn,layout
●サイズ違いで命名。
　　　btn_LL,btn_S  etc...
●IDセレクタは使わない。
●css での指定は　セレクタの中のセレクタ　くらいに留めておく。
（ポイントが加算されていってしまうため）
例）　|　header .gnav{
　　　|　}　etc...

コチラも随時追記。