Cascading Style Sheets sind zur Standardmethode zum Stylen und Layouten von Websites geworden. Designer verwenden Stylesheets um einem Browser mitzuteilen, wie eine Website in Bezug auf das Aussehen und die Bedienung angezeigt werden soll, und zwar unter Einbeziehung von Faktoren wie Farbe, Abstände, Schriftarten und vieles mehr.
CSS-Stile werden auf zwei Arten bereitgestellt:
- Inline – innerhalb der Codierung der Webseite selbst, auf individueller, Element-für-Element-Basis
- In einem eigenständigen CSS-Dokument, mit dem die Website verlinkt ist
Best Practices für CSS
"Best Practices" sind die Methoden zum Entwerfen und Erstellen von Websites, die sich als die effektivsten erwiesen haben und den größten Nutzen für die damit verbundene Arbeit erzielen. Folgt ihnen in CSS im Webdesign hilft Websites so gut wie möglich auszusehen und zu funktionieren. Sie haben sich im Laufe der Jahre zusammen mit anderen Websprachen und -technologien weiterentwickelt, und das eigenständige CSS-Stylesheet hat sich zur bevorzugten Verwendungsmethode entwickelt.
Die Befolgung von Best Practices für CSS kann Ihre Website auf verschiedene Weise verbessern:
- Trennt Inhalt vom Design: Eines der Hauptziele von CSS besteht darin, Designelemente aus HTML zu entfernen und sie an einem anderen Ort zu platzieren, damit der Designer sie verwalten kann. Diese Praxis dient auch dazu, Designer von Entwicklern zu trennen, damit sich jeder auf seine Fachgebiete konzentrieren kann. Ein Designer muss kein Entwickler sein, um das Aussehen einer Website zu erhalten.
- Macht die Wartung einfach: Eines der am meisten übersehenen Elemente des Webdesigns ist die Wartung. Im Gegensatz zu Printmaterialien ist eine Website nie "eins und fertig". Inhalt, Design und Funktion können und sollten sich im Laufe der Zeit weiterentwickeln. Wenn das CSS an einem zentralen Ort statt auf der gesamten Website verteilt ist, ist die Wartung viel einfacher.
- Hält Ihre Website zugänglich: Die Verwendung von CSS-Stilen hilft Suchmaschinen und behinderten Personen, mit Ihrer Website zu interagieren.
- Hält Ihre Website länger aktuell: Durch die Verwendung von Best Practices mit CSS halten Sie sich an Standards, die sich als stabil erwiesen haben, aber flexibel genug sind, um Änderungen in der Webdesign-Umgebung zu berücksichtigen.
Inline-Stile sind keine Best Practice
Inline-Stile haben zwar einen Zweck, sind aber im Allgemeinen nicht der beste Weg, um Ihre Website zu pflegen. Sie verstoßen gegen jede der Best Practices:
- Inline-Stile trennen Inhalt nicht vom Design: Inline-Stile sind genau die gleichen wie eingebettete Schriftarten und andere klobige Design-Tags, gegen die moderne Entwickler schimpfen. Die Stile wirken sich nur auf die einzelnen einzelnen Elemente aus, auf die sie angewendet werden; Während dieser Ansatz Ihnen möglicherweise eine genauere Kontrolle ermöglicht, erschwert er auch andere Aspekte des Designs und der Entwicklung – wie beispielsweise Konsistenz –.
- Inline-Styles verursachen bei der Wartung Kopfschmerzen: Wenn Sie mit Stylesheets arbeiten, kann es schwierig sein, herauszufinden, wo ein Stil festgelegt wird. Wenn Sie es mit einer Mischung aus zu tun haben Inline-, eingebettete und externe Stile, müssen Sie viele Standorte überprüfen. Wenn Sie in einem Webdesign-Team arbeiten oder eine Website neu gestalten oder pflegen müssen, die von jemand anderem erstellt wurde, werden Sie noch mehr Probleme haben. Sobald Sie den Stil gefunden und geändert haben, müssen Sie dies bei jedem Element auf jeder Seite tun, auf der es platziert wurde. Das erhöht Zeit- und Arbeitsbudgets astronomisch.
- Inline-Stile sind nicht so zugänglich: Während ein moderner Screenreader oder ein anderes Hilfsgerät in der Lage sein kann, Inline-Attribute zu verarbeiten und Tags effektiv, einige ältere Geräte können dies nicht, was zu einem seltsam angezeigten Web führen kann Seiten. Zusätzliche Zeichen und Text können sich auch darauf auswirken, wie Ihre Seite von einem Suchmaschinen-Roboter angezeigt wird, sodass Ihre Seite in Bezug auf die Suchmaschinenoptimierung nicht so gut abschneidet.
- Inline-Stile machen Ihre Seiten größer: Wenn Sie möchten, dass jeder Absatz auf Ihrer Website auf eine bestimmte Weise angezeigt wird, können Sie dies einmal mit etwa sechs Codezeilen in einem externen Stylesheet tun. Wenn Sie dies jedoch mit Inline-Stilen tun, müssen Sie diese Stile zu jedem Absatz Ihrer Site hinzufügen. Wenn Sie fünf CSS-Zeilen haben, sind das fünf Zeilen multipliziert mit jedem Absatz auf Ihrer Website. Diese Bandbreite und Ladezeit können sich schnell summieren.
Die Alternative zu Inline-Styles sind externe Stylesheets
Anstatt Inline-Stile zu verwenden, verwenden Sie externe Stylesheets. Sie bieten Ihnen alle Vorteile der CSS Best Practices und sind einfach zu bedienen. Auf diese Weise verwendet, leben alle auf Ihrer Site verwendeten Stile in einem separaten Dokument, das dann mit einer einzigen Codezeile mit einem Webdokument verknüpft wird. Externe Stylesheets wirken sich auf alle Dokumente aus, an die sie angehängt sind. Wenn Sie eine 20-seitige Website haben, bei der jede Seite dasselbe Stylesheet verwendet – so ist es normalerweise typically fertig – Sie können jede dieser Seiten ändern, indem Sie diese Stile einfach einmal in einer bearbeiten Platz. Das Ändern von Stilen an einer Stelle ist bequemer, als auf jeder Seite Ihrer Website nach dieser Codierung zu suchen. Diese Flexibilität erleichtert die langfristige Standortverwaltung erheblich.