Soll ich zuerst HTML oder CSS schreiben?

Es gibt viele Analogien für die HTML / CSS-Entwicklung. Das kann für einen Anfänger etwas verwirrend sein.

• HTML = Stiftungen / Haus
• CSS = Wände / Blaupause / Tapete

Gibt es hier eine bewährte Methode? Welches sollten wir zuerst schreiben?

Sie sollten zuerst ein Haus bauen und dann streichen.

Ein HTML-Dokument kann für sich alleine stehen, auch wenn es langweilig aussieht. Ein CSS-Stylesheet kann nicht. Es ist nichts anzeigbar (außer als Code), sondern Anweisungen zur Anzeige.

Es ist ein anderes Problem, dass Sie während des Malens möglicherweise Änderungen am Haus vornehmen möchten. Bei echten Häusern ist dies normalerweise nicht möglich. Bei der HTML + CSS-Entwicklung ist jedoch häufig zu beachten, dass Sie in Ihrem HTML-Dokument zusätzliche Markierungen benötigen, um das Stylen zu vereinfachen. (Dank leistungsstarker CSS3-Selektoren ist es weniger verbreitet als früher.)

Ich verwende immer zuerst Stift und Papier, Papier in Originalgröße und maßstabsgetreue Zeichnungen.

Das ist, wenn Sie Ihr Design nicht ausgebügelt haben. Wenn Sie von Ihrem Design überzeugt sind, verfolge ich einen ausgewogenen Ansatz. HTML ist die Struktur, CSS der Kleber. Bauen Sie immer wieder (HTML, CSS) -Tupel auf.

(HTML,CSS) + (HTML,CSS) -> (bigHTML,bigCSS)

(bigHTML,bigHTML) + (bigHTML,bigCSS) -> (biggerHTML, biggerCSS)

und so weiter.

So mache ich es jedenfalls.

Viel hängt von der Art der Website / Webanwendung ab, die Sie erstellen, und von der Art des Kontexts, in dem sie verwendet werden soll.

In den meisten Fällen empfiehlt es sich, semantisch einwandfreies HTML zu erstellen, CSS für standardkonforme Browser hinzuzufügen und dann nicht aufdringliche Hacks und Regeln anzuwenden (z. B. bedingte Kommentare des IE, -vendor-somethingCSS-Regeln, JavaScript-Compliance-Layer usw.). ), um nicht standardmäßige Browser zu unterstützen und herstellerspezifische Funktionen zu aktivieren.

Manchmal verfügen Sie jedoch über eine Reihe unabhängiger Webanwendungen, die Stylesheets gemeinsam nutzen (z. B. als Teil eines House-Stils), und Sie sind möglicherweise sogar in der Luxusposition, die HTML-Ausgabe der einzelnen Anwendungen zu steuern. In diesem Fall ist es möglicherweise besser, zuerst das CSS zu schreiben und dann das HTML zu optimieren, damit es funktioniert. Wenn Sie dies tun, müssen Sie zunächst analysieren, welche Seitenelemente Sie benötigen, Klassen für diese definieren, dann ein statisches Testdokument schreiben, das sie verwendet, die Stylesheets schreiben und erst dann mit dem Schreiben beginnen Anwendungen, die sie verwenden.

Um ehrlich zu sein, vermute ich, dass eine solche Luxusposition äußerst selten ist, und nur wenige Unternehmen erkennen den Wert eines einheitlichen Hausstils auf CSS-Ebene an. Häufig ist es aus praktischen Gründen erforderlich, dass ein Designer den Hausstil erstellt, und dann werden für jede Anwendung, die ihm folgen muss, unabhängige Sätze von Stylesheets erstellt. Der Grund dafür liegt hauptsächlich darin, dass die meisten Unternehmen Standardsoftware mit begrenzten Änderungsmöglichkeiten für mindestens einen Teil ihres Stacks verwenden. Oft ist es sehr viel schwieriger (oder sogar unmöglich, die HTML-Ausgabe an ein bestimmtes Stylesheet anzupassen) einige proprietäre Pakete) als das CSS neu zu schreiben. Darüber hinaus wird der Aufwand, ein Dutzend Stylesheets zu verwalten, häufig unterschätzt, und einige geringfügige Unterschiede und Eigenheiten werden als akzeptabel erachtet.

Auch wenn dies eine sehr alte Frage und Antwort ist, habe ich das Bedürfnis und die Verantwortung, dies zu kommentieren.

Ja, HTML sollte jedoch vor CSS geschrieben werden ...

Sie schreiben NICHT den gesamten HTML-Code auf die Seite und gehen dann zurück, um das CSS zu schreiben. Dies würde es extrem schwierig machen, sich die Abschnitte beim Erstellen klar zu merken, selbst wenn die Abstände und Kommentare korrekt sind.

Sie erstellen eine Website in Ebenen, als würden Sie einen mehrschichtigen Kuchen herstellen.

1. Ebene - Zuerst bauen Sie die Basis, den Container div, mit den CSS-Werten für Mindesthöhe und -breite.

2. Ebene - Anschließend erstellen Sie die nächste Ebene, die großen Abschnitte der Seite (divs und Formatierung für die Struktur), z. B. Zeilen oder Abschnitte, die wie Spalten aussehen.

3. Ebene und darüber hinaus - Dann fügen Sie weitere Abschnitte innerhalb der zweiten Ebene hinzu.

Auf diese Weise schreiben Sie etwas HTML, fügen es hinzu und formatieren es dann mit CSS für die Struktur, spülen und wiederholen. Nach meiner Erfahrung ist dies eine viel effektivere Methode zum Erstellen von Webseiten und meiner Meinung nach viel schneller als die Alternative zu allem HTML.

Verwenden Sie zum Schluss " * {outline: 1px dotted red} ", um einen Überblick über alle Ihre Elemente zu erhalten. Wenn Sie sie mit einem Stil auf Ihrer Seite hinzufügen, können Sie deren Umriss sehen und müssen sich erst dann Gedanken darüber machen, wie er aussieht Sie fügen Ihre Hintergrundfarben hinzu. In diesem speziellen Anwendungsfall vermeide ich Ränder, da Ränder den Elementen Pixel hinzufügen. Kontur ist eine Überlagerung.

Probieren Sie es aus, danke!

Ich glaube, dass die Arbeit mit der Websitestruktur (HTML) zuerst sinnvoller ist, da Sie dann eine Vorstellung von den Elementen und deren Namen haben, wenn es um die Gestaltung und Formatierung Ihrer Website geht.

Dies hängt von Ihrer eigentlichen Rolle und Ihrem primären Entwicklungsziel ab. Wenn das Ziel darin besteht zu bestimmen, was auf einer Webseite in welchem ​​Umfang angezeigt werden soll, sollte man mit HTML beginnen. Wenn es darum geht, ein angenehmes und einheitliches Design zu schaffen, kann man mit CSS beginnen. In beiden Fällen sollte man besser zuerst mit Papier und Bleistift beginnen, und wenn das aktuelle Ziel die Entwicklung einer Webanwendung ist, sollte man überhaupt nicht mit HTML oder CSS beginnen. Am besten überlegen Sie sich zuerst, was Sie entwickeln möchten, und unterteilen dann die Aufgabe in Ziele und Unterziele, anstatt einfach alles zusammen zu hacken.

Entwerfen Sie das Haus (Raster) zusammen mit einer Idee, wie es dekoriert werden soll. Baue das Haus (HTML) mit dem Gitter. dann dekoriere es (CSS Style Sheet).

Nachdem Sie das erste Haus (HTML-Seite) erstellt haben, können Sie einfach die gleiche Dekoration (CSS-Stylesheet) anwenden, wie Sie gehen. Sie können die Dekoration im Laufe der Zeit anpassen.

Eventuell möchten Sie das CSS-Stylesheet neu gestalten (redo the CSS style sheet).

Sie haben sich einen wirklich schlechten Rahmen zum Lernen und Bauen ausgesucht.

Hier gibt es zwei orthogonale Probleme.

1. Wie erstelle ich eine Website, die meinen Bedürfnissen entspricht?
2. Wie lerne ich, eine Website zu erstellen?

Hierbei handelt es sich um zwei sehr unterschiedliche Aufgaben, die unterschiedliche, möglicherweise widersprüchliche Ansätze erfordern (und oft auch erfordern).

Wenn Sie mit den Fähigkeiten, Technologien und Anforderungen eines Projekts vertraut sind, beginnen Sie mit einer Diskussion über die Anforderungen eines Standorts und durchlaufen Entwurfsübungen, um zu bestimmen, was implementiert werden muss. Das bedeutet oft Markups und Design, die oft nichts mit HTML oder CSS zu tun haben (obwohl manche Leute Mockups mit HTML und CSS machen).

Wenn Sie versuchen, das Erstellen einer Site zu erlernen, während Sie gleichzeitig eine Site erstellen, müssen Sie einen Explorations- und Lernprozess durchführen, bevor Sie wissen, was überhaupt möglich ist.

Hier hat sich eine modulare und iterative Entwurfs- und Erstellungsstrategie durchgesetzt. Wenn Sie nicht unbedingt wissen, wohin Sie mit Ihrem Endprodukt wollen (weil Sie nicht wissen, was möglich ist), bauen Sie kleine Funktionsblöcke auf, testen, ob es Ihren Anforderungen entspricht, und integrieren dieses kleinere Experiment in das größeres Ganzes.

Was heißt das konkret? Das Bauen eines Standorts kann mit dem Bauen eines Hauses vergleichbar sein, bei dem Sie Architekturpläne (Entwurfsmodelle) erstellen und dann mit dem Engineering beginnen, um zu berechnen, ob Ihr Haus standhält und Ihren ästhetischen Anforderungen entspricht. Das Erstellen einer Site kann (und sollte oft) eher so aussehen, als würden Sie eine Reihe kleiner Experimente erstellen und Schritt für Schritt ein Produkt finden, das Ihrem ursprünglichen Konzept entspricht.

Praktischerweise tüftelt fast jeder gleichzeitig an HTML und CSS.

Dies ist das häufigste Problem bei Softwareentwicklungsprojekten. Als solches können Sie von Konzepten wie Rapid Prototyping oder DSDM profitieren. Kombinierbar mit jedem Stil, zB agil (extreme Programmierung oder Feature Driven Design (mein Favorit)). Halten Sie sich an die gemeinsamen Grundsätze, die Sie zu Beginn festlegen, und halten Sie an diesen fest (KISS, YAGNI).

Für mich bedeutet dies: - Erstellen Sie zuerst einen grundlegenden funktionalen 'Prototyp', der einen Funktionsblock des Bedarfs abdeckt. Beschränken Sie sich darauf, in die Dinge 'das könnte nett sein' einzutauchen, / 'ich muss diese Dinge möglicherweise später wiederverwenden', es sei denn, sie sind OBVIOUS. Sag dir, du wirst es nicht brauchen! (YAGNI). - Notieren Sie Entscheidungen, die Sie als "Kodierungskonvention" treffen, und halten Sie sich an diese, z. B. PHP-Tags: Ich verwende kurze, weil für mein Szenario das Argument gilt und ... nicht. - Grundlegendes Styling hinzufügen, sich aber wieder einschränken.

Erweitern Sie dann Ihren Code, bis Sie einen übergeordneten Prototyp erreichen, der mehr Funktionsblöcke abdeckt. Lassen Sie Ihr CSS-Modell entsprechend wachsen. Sobald Sie vor Entscheidungen stehen, die alles betreffen, was Sie bereits getan haben (Sie werden es tun), lesen Sie diese nach, treffen Sie eine Entscheidung und notieren Sie in Ihren Kodierungskonventionen, warum Sie nach links oder rechts gegangen sind.

Kreuzen Sie Ihren Weg zu einem ausgereiften und endgültigen Produkt.

Haben Sie keine Angst vor den großen Entscheidungen, die Sie möglicherweise treffen müssen, denn die Sorge um diese Entscheidungen kostet Sie möglicherweise mehr Zeit als die Behebung des Problems. Machen Sie sich auch keine Sorgen darüber, dass die Internet-Community mit einem Stirnrunzeln über die Schulter schaut. Wenn Sie ein Produkt haben, das funktioniert, haben Sie viel gelernt, und der einfallsreiche Beurteiler des schlechten Quellcodes wird sich darüber mehr freuen das nächste, was Sie bauen (beachten Sie die Iteration hier).

Nur meine 50cts

So vergleichen Sie eine Webseite mit einem Haus:

HTML = Grundlagen / Haus CSS = Wände / Blaupause / Tapete

Wie werden Sie die Wände in der Luft schweben lassen, bis Sie die Fundamente bauen, auf denen sie sitzen? Wie können Sie CSS schreiben, um Ihre Seite zu formatieren, bis Sie die HTML-Tags geschrieben haben, auf die Sie die Stile anwenden.

Jedes CSS-Element formatiert bestimmte HTML-Tags. Diese Tags müssen vorhanden sein, um sie formatieren zu können. Wenn Sie kein HTML zum Stylen haben, sollte die CSS-Datei leer sein, da alle darin enthaltenen Stile redundant sind, da sie eigentlich nichts stylen.