回答:
最初に家を建ててから塗ります。
HTMLドキュメントは、見た目が鈍い場合でも、単独で立つことができます。CSSスタイルシートではできません。それは表示可能なものではなく（コードを除く）、表示の指示です。
塗装中に家に変更を加えることもできますが、これは別の問題です。通常は現実的ではありませんが、HTML + CSSの開発では、スタイリングを簡単にするためにHTMLドキュメントに追加のマークアップが必要なことに気付くのが一般的です。（強力なCSS3セレクターのおかげで、以前ほど一般的ではなくなりました。）
私は常にペンと紙を最初に使用し、フルサイズの紙を縮尺で描いています。
それは、あなたのデザインがアイロンをかけられていない場合です。設計に自信がある場合は、バランスの取れたアプローチを採用しています。htmlは構造、cssは接着剤です。（HTML、CSS）コンセプト「タプル」で構築し続けます。
(HTML,CSS) + (HTML,CSS) -> (bigHTML,bigCSS)
(bigHTML,bigHTML) + (bigHTML,bigCSS) -> (biggerHTML, biggerCSS)等々。
とにかくそれが私がそれをする方法です。
多くは、作成するWebサイト/ Webアプリケーションのタイプ、および使用するコンテキストの種類に依存します。
ほとんどの場合、最も適切な方法は、セマンティックに健全なHTMLを構築し、標準に準拠したブラウザにCSSを追加し、非侵入型のハッキングとルール（IEの条件付きコメント、 -vendor-something CSSルール、javascriptコンプライアンスレイヤーなど）を適用することです）非標準のブラウザをサポートし、ベンダー固有の機能を有効にします。
ただし、スタイルシートを共有する（たとえば、ハウススタイルの一部として）多数の独立したWebアプリケーションがあり、それぞれのHTML出力を制御する贅沢な立場にあることもあります。その場合、最初にCSSを記述し、次にHTMLを調整して動作させる方が良い方法かもしれません。これを行う場合、最初に必要なページ要素の種類を分析し、これらのクラス要素を定義してから、それらを使用する静的テストドキュメントを記述し、スタイルシートを記述してからの書き込みを開始それらを使用するアプリケーション。
しかし、正直なところ、このような贅沢な地位は非常にまれであり、CSSレベルで統一されたハウススタイルの価値を実際に認識している企業はほとんどないと思います。多くの場合、実用性はデザイナーが家のスタイルを作ることを決定し、その後、スタイルシートの独立したセットがそれに従う必要がある各アプリケーションに対して書かれます。この理由は、主に、ほとんどの企業が少なくとも一部のスタックに対して変更の可能性が限られた市販のソフトウェアを使用しているためです。 CSSを書き換えるよりも、一部の専用パッケージ）。さらに、多くの場合、スタイルシートのセットを維持する努力は過小評価されており、いくつかの小さな違いや癖は許容できると見なされます。
これは非常に古いQ＆Aですが、コメントする必要性と責任を感じています。
はい、HTMLはCSSの前に記述する必要があります...
あなたは、ページ上のすべてのHTMLを書いていないし、次にCSSを書くために戻って行きます。これにより、適切なスペースやコメントがあっても、セクションを作成するときにセクションを明確に覚えることが非常に難しくなります。
多層ケーキを作っているかのように、ウェブサイトをレイヤーで構築します。
最初のレイヤー-最初に、最小高さと幅cssでベース、コンテナdivを構築します。
2番目のレイヤー-次のレイヤー、ページの大きなセクション（構造のdivおよびスタイリング）、たとえば行や列のように見えるセクションなどを構築します。
第3層以降-次に、セクションの第2層内に追加し続けます。
このようにして、HTMLを作成し、構造に合わせてCSSでスタイルを設定し、すすぎ、繰り返します。私の経験では、これはウェブページを構築するはるかに効果的な方法であり、私の意見では、最初にすべてのHTMLの代替案よりもはるかに高速です。
最後に、「* {outline：1px dotted red}」を使用してみてください」を使用してすべての要素のアウトラインを取得してみてください。スタイリングでページに追加すると、アウトラインが表示され、どのように見えるかを心配する必要がなくなります背景色を追加します。境界線は要素にピクセルを追加するため、この特定のユースケースでは境界線を避けます。アウトラインはオーバーレイです。
試してみてください、ありがとう！
Webサイトの構造（HTML）を操作することは、Webサイトのスタイル設定と書式設定の要素と名前がわかるので、最初はより理にかなっていると思います。
学習と構築に非常に貧弱なフレーミングを選択しました。
ここには2つの直交する問題があります。
これらは、非常に異なる2つのタスクであり、競合する可能性のある異なるアプローチを必要とする可能性があります（多くの場合、実行します）。
プロジェクトのスキル、テクノロジー、および要件に精通している場合は、サイトのニーズに関する議論から始めて、実装する必要があるものを決定するために設計演習を行います。それは多くの場合、マークアップとデザインを意味し、HTMLまたはCSSとは何の関係もありません（HTMLとCSSでモックアップを行う人もいます）。
サイトの構築方法を学びながら、サイトを構築しようとしている場合、構築と実現の可能性を知る前に、調査と学習のプロセスを実行する必要があります。
これは、モジュール化された反復的な設計および構築戦略が一般的になった場所です。最終製品をどこに向かっているのかが必ずしもわからない場合（何が可能かわからないため）、機能の小さなチャンクを構築し、要件を満たしているかどうかを実験してから、その小さな実験をより大きな全体。
それでは、実際には具体的にどのような意味ですか？サイトの構築は、家を建てるようなもので、建築計画（設計モックアップ）を作成し、エンジニアリングを開始して、家が立ち上がって美的ニーズを満たすかどうかを計算します。しかし、サイトを構築することは、一連の小さな実験を構築し、元のコンセプトに合った製品に到達するための段階的なアプローチをとることに似ている可能性があります。
非常に実用的な問題として、ほとんどすべての人がHTMLとCSSの両方を同時に使います。
これは、あらゆるソフトウェア開発プロジェクトの一般的な問題であり、Rapid Prototyping、DSDMなどの概念を使用することでメリットが得られます。アジャイルなどの任意のスタイルと組み合わせ可能（極端なプログラミングまたは機能駆動型設計（私のお気に入り））。初めに決めた共通の原則を守り、それらに固執する（KISS、YAGNI）。
だから私にとっては：-最初に基本的な機能「プロトタイプ」を構築し、需要の1つの機能ブロックをカバーします。自分で言う、あなたはそれを必要としないだろう！（YAGNI）。-「コーディング規約」としてあなたが下した決定を書き留めて、それらに固執します。例えば、phpタグ：私は短いものを使用します。なぜなら、私のシナリオの議論のために..が適用され、...は適用されないからです。-基本的なスタイルを追加しますが、自分自身を制限します。
次に、より機能的なブロックをカバーする高レベルのプロトタイプに到達するまでコードを拡張します。それに合わせて、cssモデルを成長させます。すでに行ったことすべてに影響を与える決定に直面すると（すぐに）、それを読み上げ、決定を下し、コーディング規則にあなたが左または右に行った理由を書き留めてください。
より成熟した最終製品に向けて「円」を描いてください。
あなたが直面しているかもしれない大きな決断を恐れてはいけません。彼らを心配することは、それを修正するよりも多くの時間を費やす可能性があるからです。また、インターネットコミュニティが眉をひそめているのを心配する必要はありません。最終的には、機能する製品を手に入れると、多くのことを学んだことになり、悪いソースコードの想像力豊かな判断が喜ぶでしょう。次に構築するもの（ここでの繰り返しに注意してください）。
ちょうど私の50cts