Die Entwicklung von Front-End-Websites wird oft als dreibeiniger Hocker dargestellt, der aus folgenden Elementen besteht:
- HTML für die Struktur einer Site
- CSS für die visuellen Stile
- Javascript für Verhaltensweisen
Das zweite Bein dieses Hockers, Cascading Style Sheets, unterstützt drei verschiedene Stile, die Sie einem Dokument hinzufügen können.
- Inline-Stile
- Eingebettete Stile
- Externe Stile
Jeder dieser CSS-Stile bietet einzigartige Vor- und Nachteile.
Inline-Stile
Inline-Stile sind Stile, die direkt in das Tag im HTML-Dokument geschrieben werden. Inline-Stile wirken sich nur auf das jeweilige Tag aus, auf das sie angewendet werden:
Diese CSS-Regel deaktiviert die standardmäßige Unterstreichungstextdekoration für diesen einen Link. Es würde jedoch keinen anderen Link auf der Seite ändern. Dies ist eine der Einschränkungen von Inline-Stilen. Da sie sich nur an einem bestimmten Element ändern, müssen Sie Ihren HTML-Code mit diesen Stilen überfrachten, um ein einheitliches Seitendesign zu erzielen. Das ist keine Best Practice: Tatsächlich ist es nur ein Schritt von den Tagen der entfernt
Schriftart Tags und die Beimischung von Struktur und Stil in Webseiten.Inline-Stile erfordern auch eine sehr hohe Spezifität. Dies macht es schwierig, sie mit anderen, nicht integrierten Stilen zu überschreiben. Wenn Sie beispielsweise eine Site responsive machen und die Darstellung eines Elements an bestimmten Breakpoints ändern möchten, indem Sie. verwenden Medien-Anfragen, Inline-Stile für ein Element erschweren dies.
Inline-Stile sind nur dann geeignet, wenn Sie sie sparsam verwenden, im Sinne der "Ausnahme von der Regel", die ein oder zwei Elemente von ihren Kollegen auf der Seite abhebt.
Eingebettete Stile
Eingebettete Stile befinden sich im Kopf des Dokuments. Sie sind eingeschlossen in -Tags und sehen in diesem Teil des Dokuments sehr ähnlich aus wie externe CSS-Dateien.
Eingebettete Stile wirken sich nur auf die Tags auf der Seite aus, in die sie eingebettet sind. Auch dieser Ansatz negiert eine der Stärken von CSS. Da jede Seite Stile enthält, die in der Kopfzeile definiert sind, wenn Sie eine Site-weite Änderung vornehmen möchten, z. B. die Farbe ändern der Links von rot nach grün – Sie müssten diese Änderung auf jeder Seite vornehmen, da jede Seite einen eingebetteten Stil verwendet Blatt. Dieser Ansatz ist besser als Inline-Stile, aber in vielen Fällen immer noch problematisch.
Stylesheets, die dem Kopf eines Dokuments hinzugefügt werden, fügen dieser Seite auch eine beträchtliche Menge an Markup-Code hinzu, was die Verwaltung der Seite in Zukunft auch erschweren kann.
Der Vorteil eingebetteter Stylesheets besteht darin, dass sie sofort mit der Seite selbst geladen werden, anstatt dass andere externe Dateien geladen werden müssen. Diese Technik kann aus Sicht der Download-Geschwindigkeit und Leistung von Vorteil sein.
Externe Stylesheets
Die meisten Websites verwenden heutzutage externe Stylesheets. Externe Stile sind Stile, die in ein separates Dokument geschrieben und dann an verschiedene Webdokumente angehängt werden. Sie werden mit a. in das Hauptdokument aufgerufen Tag im Kopf des Dokuments. Externe Stylesheets können sich entweder auf demselben Server wie das HTML befinden oder vollständig von einem anderen Server eingezogen werden. Dies ist häufig bei Assets wie Schriftarten der Fall, die viele Websites von Google ausleihen.
Externe Stylesheets wirken sich auf alle Dokumente aus, an die sie angehängt sind, was bedeutet, dass Sie eine 20-seitige Website haben, auf der jede Seite das gleiche Stylesheet verwendet (dies ist normalerweise die Vorgehensweise), Sie können an jeder dieser Seiten eine visuelle Änderung vornehmen, indem Sie einfach diesen einen Stil bearbeiten Blatt. Diese Wirtschaftlichkeit erleichtert die langfristige Standortverwaltung erheblich.
Die meisten professionellen Webdesigner verwenden eine primäre CSS-Datei, um das Layout und Design einer Site zu steuern.
Der Nachteil externer Stylesheets besteht darin, dass sie Seiten benötigen, um diese externen Dateien abzurufen und zu laden. Nicht jede Seite verwendet jeden Stil im CSS-Blatt, so dass viele Seiten eine viel größere CSS-Seite laden, als sie tatsächlich benötigen.
Es ist zwar richtig, dass es bei externen CSS-Dateien einen Leistungseinbruch gibt, dieser kann jedoch sicherlich minimiert werden. Realistisch gesehen sind CSS-Dateien nur Textdateien, also sind sie anfangs nicht groß. Wenn Ihre gesamte Site eine einzelne CSS-Datei verwendet, profitieren Sie auch davon, dass dieses Dokument nach dem ersten Laden zwischengespeichert wird. Das bedeutet, dass Bei einigen Besuchen kann es auf der ersten Seite zu leichten Leistungseinbußen kommen, aber nachfolgende Seiten verwenden die zwischengespeicherte CSS-Datei, sodass jeder Treffer negiert.