どうも7noteです。HTMLとCSSはどの順番で書くのか？

初心者あるあるかもしれませんが、HTMLとCSSの書き順はどのように書くのが正しいのか。

正しい書き順はどれ？

選択肢A：HTMLを一通り書いてから、CSSを書く。
選択肢B：HTMLとCSSを上から交互に書く。
選択肢C：必要なCSSを書いてから、HTMLを書く。

↓
↓
↓
↓
↓
↓
↓
↓
↓
↓

言うまでもなくAなのですが、では次はどうでしょうか。
○か✕かかんがえてみてください。

HTMLとCSSの書き方は？

・問題①：common.cssやreset.cssなどの必要なcssは予め用意しておく。（○ or ✕）
・問題②：構造が難しそうなところがあった場合は、めんどくさそうなので飛ばして後で書く。（○ or ✕）
・問題③：class名や画像名はcssや画像を作成する時に入れる。（○ or ✕）

↓
↓
↓
↓
↓
↓
↓
↓
↓
↓

・①の答え：common.cssやreset.cssなどの必要なcssは予め用意しておく。

答えは【○】。

1ページものを作る場合でも、一般的にはブラウザcssを打ち消すためのCSSを予め用意してから書くことが基本となります。

次。

・②の答え：構造が難しそうなところがあった場合は、めんどくさそうなので飛ばして後で書く。

答えは【✕】。

後回しにしてしまうデメリットとして、「やったつもりになってコーディング漏れが出てしまう」「そのことで作業時間を見誤ってしまう」などがあります。
ちょっとめんどくさそう、という理由で後回しにすることは頭の中にあるやることのリストから抜けてしまいがちなので、あまりオススメしません。

ただ、勉強として取り組んでいた場合は別で、本当にわからないのに考え続けても、場合によっては学習意欲が下がってしまったり、モチベーションの低下につながってしまうので、調べたり詳しい人に効いたり、質問投稿サイトで聞いてみたりしましょう！

よく「5分考えてわからなければ、聞く」と言われたりするので、まずは考えて取り組んでみて、それでもわからなければ1度おいといて、次に行きましょう。

・③の答え：class名や画像名はcssや画像を作成する時に入れる。

答えは【✕】。

✕の理由はさきほどの「漏れてしまう」という理由も同じくあるのですが、「効率的にすすめる」という理由もあります。
親要素に使ったid名やclassをそのままコピペで画像名に流用できるのもありますが、予めhtmlを組む時にclass名や画像名を決めておくことで、後でCSSを書いた時に悩まずに済むことが大きいですね。
好みの問題もあるかもしれませんが、私自身の体験談としてはhtmlを書く時に直感ですべて先に決めてしまうほうが、効率が少し上がりました！