![見出し画像](https://assets.st-note.com/production/uploads/images/37317304/rectangle_large_type_2_fbf7f0a726eec2d2d5fffd7f8a1ffac4.jpg?width=1200)
セクション構造と命名規則
職業訓練時代コーディングした時に、ボックスモデルと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...
コチラも随時追記。
この記事が気に入ったらサポートをしてみませんか?