Warum sollte Styling nicht direkt in HTML gemacht werden?

ItamarG3 08/15/2017. 12 answers, 2.942 views
lesson-ideas web-development html css

Ich habe vor kurzem bemerkt, dass gemäß dieser Site aus html veraltet ist. Aus dieser Antwort auf Stack Overflow wird der Laufrahmenauszug aus CSS erstellt. Die Erklärung, die der Änderung gegeben wird, ist, dass html über die Struktur des Dokuments ist und dass das Layout und die Animation und das Styling usw. von CSS ausgeführt werden sollten.

Das hat mich zum Nachdenken gebracht:

Würden Sie explizit den Unterschied zwischen dem Setzen des Stilattributs eines html Tags und dem Durchführen des CSS-Codes lehren, um das Verständnis der Schüler für das Hinzufügen von CSS und HTML zu verbessern?

Um es einzuschränken, suche ich nach Beispielen oder Erklärungen, wie das explizite Lehren es den Schülern erleichtern könnte, ihre Webseiten zu gestalten . Vorzugsweise eine Erklärung.

Indem ich explizit lehrte, widme ich eigentlich eine Lektion mit dem Titel "Styling durch .CSS" oder ähnliches.

Etwas Kontext, wenn es benötigt wird:

Die Studenten lernen grundlegendes Webdesign: HTML, JavaScript (sehr einfach), JSP und SQL. Sie lernen diese für ein Jahr und am Ende des Jahres sollten sie eine Website haben (für die sie Noten erhalten). Ich frage mich, ob eine Lektion über CSS überhaupt zu besser aussehenden Websites führen könnte.

5 Comments
3 Puppy 07/30/2017
Das Kernproblem besteht darin, dass Sie davon ausgehen, dass das Styling nicht direkt in HTML erfolgen sollte und dass die Verwendung von CSS besser ist. Keines dieser Dinge ist wahr.
ItamarG3 07/31/2017
@Puppy gut, Teil der Frage ist, ob ich es separat unterrichten soll. Wenn nicht, werden keine Stylesheets verwendet. Aber glauben Sie, dass jede Website irgendwo tatsächlich hards alles css in html hardcodiert? Every div hat in seinem style Codeberg?
1 David Spence 07/31/2017
Diese Seite zeigt die Macht, css getrennt zu halten. csszengarden.com - Gleiche Struktur, anderes CSS-Stylesheet.
ItamarG3 07/31/2017
@DavidSpence schön. Ich werde das auf jeden Fall verwenden
1 no comprende 07/31/2017
Was auch immer Sie tun, zeigen Sie ihnen diesen SO-Post über das Parsen von HTML mit Regex nicht . Könnte ihnen Albträume geben!

12 Answers


richard 07/30/2017.

Ich mag die Idee, ein paar Stylesheets zu erstellen und sie von den Schülern auf ihren HTML-Code anwenden zu lassen. Sie können dann die Möglichkeit erkennen, separate Stylesheets zu verwenden.

Sie können dann mit der Bearbeitung der Stylesheets beginnen und sehen, dass die Stärke einer kleinen Änderung jede Überschrift, jeden Absatz usw. ändern kann.

Ich habe auch in der Vergangenheit eine HTML-Datei geschrieben, die unten eine Reihe von Schaltflächen hatte. Diese Schaltflächen würden eine andere CSS-Datei zum Laden auslösen. Es war ein sehr einfaches JavaScript.

Um zu antworten, sollten sie getrennt gehalten werden

Stil und Inhalt getrennt zu halten, wird von W3 und vielen anderen empfohlen. Es implementiert die Trennung von Anliegen und Verantwortung. Beide sehr wichtige Muster im Software Design.

Um zu antworten, sollten Sie eine Lektion für separate CSS-Dateien verwenden.

Ja. Wenn es wichtig ist, diese getrennt zu halten, was es ist, dann sollten Sie den Schülern beibringen, sie getrennt zu halten. Sparen Sie Zeit, indem Sie ihnen nicht beibringen, es mit dem HTML-Code zu vermischen (dies spart Zeit zwei Mal, da Sie es nicht wieder abmelden müssen).


Ich habe das nur mit ein oder zwei Leuten gemacht (keine Klasse).

5 comments
ItamarG3 07/30/2017
Dieser zweite Absatz klingt besonders nützlich. Aber das beantwortet nicht, ob ich wirklich eine Lehre für das Unterrichten geben sollte, wie und warum man ein css Stylesheet schreiben sollte, anstatt inline html Stilattribute.
richard 07/30/2017
Eine teilweise Antwort zu If hinzugefügt und warum eine Lektion zu widmen.
1 Buffy 07/30/2017
Ich stimme zu, dass das Nichtunterrichten ein besonders verschwenderischer Gebrauch von jedermanns Zeit ist. Es ist am besten, Missverständnisse zu erkennen, bevor schlechte Gewohnheiten aufgebaut und verstärkt werden.
1 richard 07/30/2017
@tim, das ist nur eine Ladeoptimierung. Konzeptualität sollte es immer noch getrennt bleiben. Google sagt jedoch, dass es sich in derselben Datei befindet. Sie sagen nicht, dass Sie jedes Bit einzeln stylen sollten. Sie sagen, nehmen Sie, was in einer CSS-Datei sein könnte, und fügen Sie sie dem <style> -Abschnitt des html hinzu.
1 Darren 07/31/2017
Anstatt den Studenten eine Vielzahl von Stylesheets zu geben, die ihren Code beeinflussen, würde ich den umgekehrten Ansatz versuchen. Nachdem Sie ihnen Inline-Stile in HTML beigebracht haben, geben Sie ihnen eine Seite, die sich auf ein CSS-Dokument stützt, und bitten Sie sie, ein eigenes Stylesheet dafür zu erstellen (mit den gleichen Techniken wie bei Inline-HTML). und sie an einem Ort zusammenfügen). Dann kann jeder in der Klasse seine Stylesheets mit einem gemeinsamen Testobjekt (dem von Ihnen gelieferten) vergleichen und die Möglichkeiten sehen.

Buffy 07/30/2017.

Wenn Sie nur eine Seite erstellen möchten, die einfach und ad-hoc ist und sich in Zukunft nie ändern wird und nur auf einer Art von Gerät zu sehen sein wird, dann bauen Sie das Styling direkt in HTML. Das Gleiche gilt, wenn Sie ein Programm schreiben, das nur einmal auf einem Gerät ausgeführt wird, um eine Antwort zu erhalten, nach der das Programm obsolet wird. Es gibt also keinen Grund, sorgfältig zu codieren. "Schnell und dreckig" funktioniert für solche Dinge.

However Dinge ändern sich jedoch, und Webseiten werden auf Geräten mit unterschiedlichen Bildschirmgrößen, sogar Farbmodellen, angezeigt. Und sie können in Zukunft auf Geräten betrachtet werden, die noch nicht existieren.

Wenn Sie also Websites erstellen möchten, die wichtig und dauerhaft sind und die in Zukunft beibehalten werden müssen, verwenden Sie CSS. Wahrscheinlich würden Sie nicht unbedingt ein wichtiges C-Programm schreiben, aber zumindest die Dinge ausschließen, die gleich sein müssen, aber wiederverwendet werden. In der einfachen C-Programmierung nehmen wir dafür Funktionen heraus. In HTML nehmen wir das Styling in Kauf. Auf einer tieferen Ebene fasst die Serverseite auch einen Großteil der Daten usw. zusammen. Dadurch können Dinge, die gleich sein sollen, gleich bleiben und uns eine Designstufe unabhängig von anderen Ebenen ändern.

Das ist nicht das Gleiche, aber sehen Sie sich den zugrunde liegenden Code der Google-Startseite an. Ich weiß nicht, was sie benutzen, um das zusammenzusetzen und zu pflegen, aber ich bezweifle, dass es nur ein Texteditor ist. Beachten Sie, dass sich ihre Titelseite , obwohl sie im Layout sehr einfach ist, häufig ändert.

Note to the Instructor Wenn Sie bereit sind, die Arbeit des Schülers zu bewerten, können Sie ihn auf verschiedenen Geräten mit unterschiedlichen Bildschirmauflösungen anzeigen. Ich schlage jedoch nicht vor, dass Sie auch dafür sorgen, dass sie css pro Gerät bereitstellen.

Sehen Sie sich einige der StackExchange-Seiten auf einem Desktop im Vergleich zu einem Telefon an. Und für einen Schocker sehen Sie sich sowohl die Quelle als auch die Stylesheets einiger Seiten an.

2 comments
1 Luke Sawczak 07/31/2017
Der Vergleich mit Funktionen ist gut. Ich nehme an, dass die fragliche Sünde direkt Stilattribute in Quell-HTML liefert. Wenn dies der Fall ist, könnte man es mit dem Körper einer Methode vergleichen und einfach den Punkt festhalten, an dem man die Methode aufrufen würde. Im Extrem extrem kontraproduktiv.
no comprende 08/01/2017
Für einen echten Schocker, schauen Sie sich die Quelle und Stylesheets von Microsoft-Seiten und Moodle an! Sie können Hunderte von Zeilen lang sein. Das ursprüngliche Konzept von HTML war, dass es auf Geräten funktionieren würde, die "noch nicht existieren". Und es gibt derzeit so viele Bildschirmgrößen, dass es auch nur eine Variable sein kann.

AnoE 07/30/2017.

Um sie wirklich zu verstehen, was Sie mit CSS allein tun können - indem Sie only andere CSS-Datei ersetzen - bringen Sie diese in den CSS Zen Garden . Mit genau dem gleichen HTML für jede Seite, und only die .css-Datei ersetzt, erhalten Sie absurd wilde Seiten. Vom ruhigen kleinen Nichts bis zum 3D-Scrolling-Würfel ...

Erklären Sie ihnen dann, dass das Skillset, das benötigt wird, um das HTML zu erstellen, im Vergleich zum Skillset für (besonders extreme wie diese) CSS ganz anders ist und dass das HTML nur als Informationsträger fungiert.

Ein weiteres Goodie wäre, einen Screenreader (für Blinde) zu installieren - es gibt solche mit eingeschränkter freier Benutzung - um ihnen zu zeigen, wie derselbe HTML-Code "aussieht", wenn er laut gesprochen wird.

Weisen Sie auch darauf hin, dass diese Werkzeuge für Sehbehinderte, wenn sie gut strukturiert sind, beispielsweise Linktexte usw. aus dem HTML-Code extrahieren können, und dies ermöglicht es auch, eine Seite nur mit der Tastatur zu navigieren - was nützlich sein kann, wenn ist so geneigt, auch wenn das Sehvermögen gut ist.

Schließlich weisen Sie darauf hin, dass eine Seite mit einer guten Trennung von Inhalt und Gestaltung eine höhere Chance hat, auf tragbaren Geräten zu arbeiten - das Schlüsselwort ist Responsive Design, bei dem der Inhalt frei in jede Auflösung nach Bedarf fließen kann.


thehayro 07/30/2017.

Um es einzuschränken, suche ich nach Beispielen oder Erklärungen, wie das explizite Lehren es den Schülern erleichtern könnte, ihre Webseiten zu gestalten. Vorzugsweise eine Erklärung.

Wie Richard sagt, können die Schüler sehen, wie eine einfache Bearbeitung des Stils jedes Element verändern kann.

Als Beispiel könnten Sie Ihren Schülern "den Vorteil der Trennung des Stils vom HTML" "vermitteln". Was bedeutet, geben Sie ihnen eine Übung, in der sie einige Elemente (zB färben Sie den Elementhintergrund) in ihrem HTML formatieren müssen. Lassen Sie sie dann jedes Element in eine andere Farbe ändern. Die Lektion wäre, sie verstehen zu lassen, dass diese Aufgabe viel weniger zeitaufwendig sein kann, wenn Sie den Stil vom HTML trennen. Sie können dann demonstrieren, wie Sie eine Zeile in der CSS-Datei ändern, wodurch die Hintergrundfarbe aller Elemente geändert wird.

4 comments
thesecretmaster♦ 07/30/2017
HI thehayro! Willkommen bei Informatik-Pädagogen !
Puppy 07/30/2017
Alternativ könnten sie ihren HTML-Code durch Code wie eine vernünftige Person erzeugen. In diesem Fall ist es trivial, die Farbe jedes Elements ohne separate Stylesheets zu ändern.
1 thehayro 07/30/2017
Sicher. Das entspricht den Anforderungen, bei denen die Webseite angezeigt werden soll (mobil / Desktop). Aber die Frage, so weit ich es verstand, war, wie man erklären kann, warum und wie eine Trennung von HTML und CSS notwendig ist.
no comprende 08/01/2017
Als ich CSS lernte, gab ich mir die Aufgabe, ein veränderbares Schachbrett und ein kanonisches dreispaltiges Seitenlayout mit Kopf- und Fußzeile zu erstellen.

SpiritBH 07/31/2017.

Fragen Sie sich: Warum trennen wir irgendetwas in irgendeiner Form von Code?

In fast jeder Programmiersprache gibt es Trennung und Delegation. Wir tun dies, um sicherzustellen, dass wir den gesamten Code leichter im Auge behalten und in der Lage sind, Probleme leichter zu identifizieren (die unweigerlich entstehen, weil kein Programmierer unfehlbar ist).

Deshalb denke ich, dass eine spezielle Lektion über CSS eine gute Idee ist, weil es ihnen hilft zu verstehen, was dafür verantwortlich ist. Es hilft ihnen, zu verstehen, dass, wenn alle HTML korrekt sind, wenn man die Quelle betrachtet, aber das ganze Make-up immer noch durcheinander ist, dass sie zum CSS schauen müssen.

Darüber hinaus ist CSS groß, flexibel und kann viel mehr, als nur einen schönen Rahmen um Dinge zu setzen. Um der Klasse zu zeigen, was sie tun kann und wie komplex sie sein kann, wird sie weiter nach vorne treiben, wie unklug es ist, HTML und CSS zu tief zu mischen.

Am Ende ist die Trennung von CSS von HTML (oder einem anderen Code) eine Entwicklungsstufe; Es geht nicht darum, dass die Erstellung funktioniert (besser), sondern dass der Entwickler mehr und einfachere Kontrolle über ihre Erstellung hat.

Vielleicht möchten Sie versuchen, die Klasse dazu zu bringen, die Arbeit der anderen zu überprüfen, damit Sie sehen, wie wichtig es ist, sauberen delegierten Code zu haben, wenn Sie in einem Team arbeiten.

1 comments
ItamarG3 07/31/2017
Sie werfen einige sehr interessante Punkte auf. Vielen Dank! und willkommen bei Informatik Pädagogen

gabe3886 07/31/2017.

Eine etwas andere Betrachtungsweise könnte darin bestehen, DRY Code einzuführen (Do not Repeat Yourself).

Wenn Sie CSS zum Entwerfen verwenden, wissen Sie, dass das Styling durch einfaches Hinzufügen einer Klasse zu einem HTML-Element greifen sollte. Wenn Sie alles manuell hinzufügen müssen, müssen Sie, wenn Sie einen Teil ändern müssen, viele, viele mehr ändern.

Um eine Idee der Illustration von W3 Schulen zu stehlen, wenn Sie, sagen wir, Absätze mit verschiedenen Hintergrundfarben haben wollten, könnten Sie es so machen:

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Aber wenn ich die Reihenfolge so ändern möchte, dass es 2,4,3,1 ist, aber die Farbe behalten, dann muss ich alle Stile ändern, die in jedem Tag eingebaut sind. Wenn das über mehrere Seiten hinweg geht, kann die Arbeitslast enorm sein.

Wenn ich es in CSS gemacht habe, kann ich Folgendes tun:

p:nth-child(odd) {
    background: red;
}

p:nth-child(even) {
    background: blue;
} 

Jetzt interessiert es nicht mehr, was der Inhalt ist, ich kann sie bestellen, wie ich mag und das Styling noch funktioniert. Viel Aufwand hat sich geändert. Wenn ich die Reihenfolge ignoriere, wenn ich sie in vernünftigere Farben ändern möchte, damit sie leicht lesbar sind, ändere ich den Wert in CSS einmal, und er wird auf jedes übereinstimmende DOM-Objekt angewendet.

Darüber hinaus (da CSS im head-Tag in HTML eingebettet werden kann) muss es in eine Datei aufgeteilt werden, was bedeutet, dass ich mein (jetzt sinnvolleres) CSS nicht in verschiedenen Dateien, sondern in Ordnerstrukturen für jeden Seite habe ich. Ich füge die CSS-Datei in die Kopfzeile ein und die Stile werden wirksam. Nun, wenn ich Änderungen an den Farben vornehmen oder zusätzliche Stile hinzufügen muss, erhalte ich die gleichen Vorteile, da ich nicht duplizieren muss, da ich keine Inline-Stile verwende.

Ein weiterer Vorteil einer separaten Datei, weg von den geteilten Zuständigkeiten, ist die Leistung. Browser sind ziemlich gut im Zwischenspeichern von Dateien. Wenn sie also eine einzelne (idealerweise reduzierte) CSS-Datei für die Site herunterladen müssen, die sie dann erneut anwenden kann, ist es eine Sache weniger, sie für andere Seiten herunterzuladen. Leistung sollte immer eine Überlegung für Leute sein, besonders mit der Zunahme im beweglichen Browsen. Wenn eine Webseite viel CSS enthält, ist die Quelle natürlich groß. Dies dauert länger, um herunterzuladen und / oder nutzbar zu werden, was die Leute davon abhalten kann, das Warten wird für sie unannehmbar.


ncmathsadist 08/01/2017.

Wir lehren, dass es drei Schichten zu einer Webseite gibt: Struktur, Aussehen und Verhalten. Die Struktur wird vom DOM bestimmt, das mit einem wohlgeformten HTML5-Markup erstellt wird. Wenn wir etwas über HTML lernen, beginnen wir sofort damit, den Dokumentbaum zu zeichnen, damit wir verstehen können, wie Elemente auf einer Seite miteinander in Beziehung stehen.

Das Aussehen wird von CSS bestimmt, das auf das DOM zugreift, um die Seite zu formatieren und zu formatieren. Dies wird in einer separaten Datei gespeichert, damit es von einer verwandten Gruppe von Seiten gemeinsam genutzt werden kann. HTML behandelt Ad-hoc-Situationen mit Hilfe von id oder class . Die Verwendung dieser Funktionen erleichtert die Verwaltung von Seiten, da der Stil für Elemente mit diesen Attributen an one place in einer CSS-Datei erstellt wird.

Die dritte Ebene ist Verhalten, das in einer JavaScript-Datei angezeigt werden sollte. JavaScript muss never auf einer Seite angezeigt werden, außer beim Aufrufen von Funktionen aus Ereignisbehandlungscode. Auch dies kann in einer JS-Datei angehängt werden. onload Sie sicher, dass Ihre Schüler über onload und onload frühzeitig Bescheid wissen, sodass sie das Aufrufen von Code verzögern können, bis Seitenelemente vorhanden sind.

Wenn Sie Node installieren, können Sie JS-Code in der Befehlszeile testen und Testsuites für die von Ihnen erstellten Funktionen entwickeln.

Die Trennung der drei Ebenen sorgt für Ordnung und maximiert die Wiederverwendung von Code.


user1639154 07/31/2017.

Es scheint, dass viele Antworten hier nicht den Punkt der Vererbung auf Styling ansprechen, da dies auch gelehrt werden sollte. Die Grundregel lautet, was zuletzt gelesen wurde.

Das erste, das geladen wird, ist normalerweise das externe Blatt im Kopf des Dokuments. Ein im Kopf des Dokuments verlinktes Stylesheet wird von Stilen überstrichen, die im HTML-Textkörper inline platziert sind, und diese wiederum werden von Stilen überschrieben, die direkt auf dem DOM-Element platziert werden. Mit dem! Important-Tag kann dieses Verhalten ebenfalls geändert werden.

Die meisten werden ihre CSS-Datei in eine eigene Datei einfügen, da sie einfacher zu warten ist und nicht so viel Arbeit erfordert, wenn sie aktualisiert / geändert wird.

BEARBEITEN: Um nur ein wenig weiter zu verdeutlichen, sind es nur die spezifischen Stile, die in den Klassen übereinstimmen / sich überschreiben, wenn der eine inline einen Stil zum Unterstreichen von Text hinzufügt, der nicht in der Klasse im externen Blatt für Beispiel es wird nur das zusätzliche Styling hinzufügen. Die Klassen ersetzen einander nicht direkt, sondern verschmelzen miteinander.

5 comments
1 ItamarG3 07/31/2017
Beeindruckend. Willkommen bei Informatiklehrern . Das ist wirklich etwas, was ich nicht bedacht hatte. Ich würde es lieben, wenn Sie einige Beispiele oder eine Beschreibung hinzufügen könnten, die das zeigen. (Ich can sie selbst schreiben, aber ich bin mehr daran interessiert zu sehen, was Sie denken können). Das ist wirklich eine interessante Antwort :)
1 ItamarG3 07/31/2017
Unrelated: Warum gehst du nicht auf Tour ? Ich bin sicher, Sie würden es interessant finden.
user1639154 07/31/2017
Ich habe es etwas falsch gemacht, zuerst sein externes Stylesheet, dann Dokumentstile und dann auf das Element, mein Gehirn ist nie 100% an einem Montagmorgen. :)
ItamarG3 07/31/2017
vergeben und vergessen ;). Sie können Ihre Antwort bearbeiten. Es gibt eine edit Taste \ link direkt unter Ihrer Antwort. Wollen Sie, während Sie gerade dabei sind, ein Beispiel hinzufügen, um zu zeigen, worauf sich Ihre Antwort bezieht? Es wäre wirklich eine viel bessere Antwort: D
user1639154 07/31/2017
Leider habe ich gerade keine Zeit. Ich wollte nur Vererbung von CSS erwähnen, wie es wichtiger Aspekt von CSS ist.

rackandboneman 08/03/2017.

Erstellen Sie ein Projekt, in dem das Ergebnis zwei völlig unterschiedliche Ansichten same document , z. B. eine Version, die auf einem großen Monitor gut aussieht und eine andere, die auf einem iPhone großartig aussieht.

Wenn Sie keine statische Webseite, sondern computergenerierte, aktualisierbare Dokumente verwenden, wird der Punkt noch mehr nach Hause gebracht, da die Einbettung von Stilinformationen in den Dokumentgenerator die Sicht deutlich komplexer macht - die einzige Möglichkeit, mit Stil umzugehen, ist die Änderung des Dokumentgenerators. der ganze Aufwand oder das stylesheet das genau das ist, was Sie beabsichtigt haben. Noch besser: Weisen Sie two Gruppen in separaten Ecken des Raums zu, um die Dokumentgenerierung und die Stylesheet-Teile zu erstellen - und regeln Sie, wie die Spezifikationen zwischen den beiden kommuniziert werden.

4 comments
ItamarG3 08/03/2017
Das ist unglaublich. Beeindruckend.
rackandboneman 08/03/2017
Nun, mach es glaubwürdig.
ItamarG3 08/03/2017
Es ist unglaublich, weil es ein Problem mit Umständen löst, die ich nicht offenlegen kann (Schulzeugnisse), aber es spricht die Frage nicht exactly an ...
1 rackandboneman 08/03/2017
Oh, und ich mische mich in die Diskussion ein, nicht als Lehrer, sondern als IT-Profi - was ich beschrieben habe, ist, warum Dinge in der Praxis gemacht werden, genau wie die Theorie, die du unterrichten willst :)

Chris M. 08/02/2017.

Es gibt viele gute Antworten hier. Ein Punkt, den ich noch nicht gesehen habe, ist, dass Inhalt und Design oft von separaten Personen oder Teams erstellt werden, und so dass jeder mit seinen eigenen Werkzeugen und seiner eigenen Sprache definiert ist, ermöglicht die notwendigen separaten Arbeitsabläufe.

4 comments
ItamarG3 08/02/2017
Beeindruckend. Daran hatte ich nicht gedacht. Würde es Ihnen etwas ausmachen, etwas darüber zu erweitern, wie ich dies in einer separaten Lektion über die Verwendung von CSS-Stylesheets erklären kann?
Chris M. 08/02/2017
Ich würde eine Analogie verwenden. Automobilingenieure wählen keine Autofarben. Drehbuchautoren machen im Allgemeinen kein Kostümdesign.
ItamarG3 08/02/2017
Aha. Vielleicht sollten Sie solche Analogien in Ihre Antwort aufnehmen, indem Sie die Antwort bearbeiten.
1 Buffy 08/03/2017
Eigentlich ist es schlimmer. Bei einigen großen Unternehmen mit einem wichtigen Webauftritt sitzt ein Standardteam über dem Content- und dem Layout-Team. Wenn das Layout ein Pixel vom Standard entfernt ist, machen Sie es. Ein Pixel.

thesecretmaster 08/03/2017.

Ein wichtiger Grund, warum Inline-Styles schlecht sind, ist die einfache und einfache Code-Lesbarkeit. In diesem Fall sollte ein Beispiel genügen, um Ihren Punkt zu beweisen:

  
The Title
This is a super great article

Verglichen mit:

  
The Title
This is a super great article

Zusätzlich zu diesem Beispiel, ohne Klassen und IDs zu verwenden, machen Sie das DOM viel schwieriger mit JavaScript zu manipulieren und Sie machen es unmöglich, Pseudo-Elemente und einige der wirklich schönen CSS-Selektoren wie :nth-child() und :first-child , um ein paar zu nennen.


Puppy 07/31/2017.

Ich würde dem völlig widersprechen - das Styling sollte direkt in HTML erfolgen.

Das Hauptproblem ist, dass Styling nicht einmal von der HTML-Struktur unabhängig ist. Das einfache Schreiben der Stile in eine physisch getrennte Datei ändert dies nicht. Ein gutes Beispiel ist die Unterstützung mobiler Geräte. Theoretisch könnten Sie eine mobile CSS-Datei erstellen. Aber in Wirklichkeit benötigen Sie wahrscheinlich ein völlig separates UI-Design, um eine gute Erfahrung auf einem mobilen Gerät zu erzeugen, und dann eine separate HTML-Struktur, um dies zu unterstützen, und dann einen separaten Satz von Stilen. "Den Knopf gleich machen, aber etwas kleiner" funktioniert nur bei den kleinsten Stücken.

Um die richtige Benutzeroberfläche zu erstellen, müssen Sie die HTML-Struktur erstellen, die die benötigten Stile unterstützt. Da die beiden in der Tat eng miteinander verbunden sind, macht es sie einfach, alles zu verstehen und alles an einem Ort zu haben.

Darüber hinaus ist es kein Problem, HTML mit duplizierten Stilen zu generieren, da Sie Ihren HTML-Code wahrscheinlich durch Code generieren, da Ihr Code-Generator Stile den ganzen Tag ausspuckt.

Roh-CSS zu haben ist enorm problematisch, da die Stile vollständig zufällig und global sind und schwierig wiederzuverwenden sind. Sie machen einen Klassennamen in der Hoffnung, dass niemand es benutzt hat. Sie verschachteln Ihre eigenen Klassen innerhalb dieses Elements, um dieses Problem ein wenig zu lösen, aber Sie können diese Klassen jetzt nicht an anderen Stellen wiederverwenden, da sie sich nicht in der richtigen DOM-Struktur befinden. Dann finden Sie heraus, dass ein zufällig ausgewählter Typ in einem komplett separaten Teil Ihrer Seite Ihre Klasse verwendet hat, ohne Sie zu benachrichtigen, und jetzt haben Sie ihn durch Änderung Ihrer Stile aufgebrochen. Und viel Glück bei der Typprüfung, IDE-Unterstützung usw. Es ist auch schwierig, zB parametrisierte Klassen zu erstellen, oder global Ersatz display: -webkit-flex , zB display: flex mit display: flex und display: -webkit-flex für iOS.

Der richtige Umgang mit Stilen ist, wie bei jedem anderen Code, mit ihnen umzugehen - sie in einigen Funktionen zu kapseln.

5 comments
1 thesecretmaster♦ 07/31/2017
Hallo Welpe, willkommen zu Informatik-Pädagogen ! Wenn du einen anderen Welpen treffen möchtest, kannst du Hallo zu Buffy sagen, die eine Bulldogge ist. Dies ist eine interessante Antwort, danke, dass Sie hier Ihre Perspektive teilen!
2 richard 07/31/2017
Ich stimme zwar nicht mit allem überein, was du sagst. Ich verstehe deinen Standpunkt. Besonders die letzte Zeile (ich denke, du solltest das erweitern). Zeig uns, wie du denkst, dass es getan werden sollte. Selbst wenn wir nicht 100% zustimmen, könnten wir etwas lernen.
no comprende 08/01/2017
Ihre Antwort erinnert mich an die Zeit, als ich eine Frage stellte und jemand sagte: "Wenn Sie die Messe auf Latein lesen." Es gibt viele "richtige" Wege, Dinge zu tun, und aus Ihrer Sicht mit generiertem HTML, tatsächlich macht es keinen Unterschied. Die meisten Lehrer unterrichten jedoch kein generiertes HTML, so wie die meisten Programmierer nicht lernen, Compiler zu schreiben. Der Layer, den wir hinzufügen, um die Pflege von HTML-Dateien zu erleichtern, ist beim Wegwerf-HTML überflüssig. Auch ich mag es, Dinge zu erzeugen, aber ich bin in der großen Minderheit. Vielleicht können wir irgendwann über Domain Specific Languages ​​sprechen?
Puppy 08/01/2017
Dozenten, die generiertes HTML nicht lehren, lehren kein nützliches HTML.
ItamarG3 08/02/2017
@Puppy Ist das so?

Related questions

Hot questions

Language

Popular Tags