模写コーディングを終えてポイントまとめ

Designの確認

カラーの確認
・背景色、文字色、アイテムの色の確認
・カスタムプロパティ化しておく。

:root {
--color-bg-light: #eceff4 ;
}

コンテンツ幅の確認
・sp版、pc版のメイン幅の確認
・container,wrapper,innerの確認
・レイアウトのカスタムプロパティ化

レスポンシブ化するときに横並びになる要素の確認
・横並びにする場合はブロック化しておかなければいけないため

疑似要素をつかうものを確認

繰り返し使うパーツの把握（コンポーネント、モジュール）
　例）ボタン、見出し、コンテンツ幅
　　コンポーネントパーツから先に作るほうがパズルしやすい
　　コンポーネントパーツ自体には幅や高さ、マージンなどの情報を持たせ　　　ない。

全体共通のスタイルを記述しておく

html {
background-color: var(--color-bg-base);
}

body {
line-height: 1.75;
font-size: 16px;
color: var(--color-font-base);
font-family: var(--font-family-base);
}

@media screen and (min-width: 768px) {
body {
font-size: 18px;
}
}

コーディングする際の注意点
・繰り返しをコピペをする際は、構成に追記しなくてもいいように確認する。
・ブロックに対するコメントアウトを残す