①最初に骨組みを決める
これとても重要です。
デザインを見て、どこでブロック分けするかを考え、とりあえずHTMLタグだけで組みます。クラス名とかつけるのは後。
繰り返し要素の場合、最初のループ分だけ作ります。
この段階でのブロック分けがサイト全体のコーディングに関わってきたりするので、よく考えてやることがポイント。
共通要素で他ページに流用できるパターンもありますからね。

②大枠のレイアウトを設定する
例えば2カラムの要素がある場合、先に2カラムを実現するようにスタイルを設定していきます。
該当ブロックに対してクラス名をつけ、HTMLファイル内にスタイルを書いていきます。
今までは、スタイルは最初からCSSファイルに書いて両方アップして見た目確認して・・・ってやっていたのですが、同一HTMLファイル内に一旦書いてしまうのがとても効率的でした。
設定したい要素のすぐ近くにstyleタグで 書けばOKです。
最終的にスタイルが固まったらCSSファイルに切り取って貼り付けるだけです。

③大枠のレイアウトができたら、細かい装飾をつけていく
ここからが長いですが、スタイルの設定が必要な箇所にクラス名を追加し、がしがしスタイルを書いていきます。
CSS設計次第ですが、設定する必要のあるタグにだけクラス名してあげればとりあえずいいかも。
BEMのような厳密なものは必要なさそうなものにもクラス名をつけてあげたほうがいいかもしれませんね。