Angemessene CSS-Struktur für das Website-Design

Architektur-CSS

Unter der Voraussetzung, dass aktuelle Browser es im Allgemeinen unterstützen, wurde CSS eine beispiellose Mission übertragen. Je mehr Sie sich jedoch auf CSS verlassen, desto größer und komplexer wird die Stylesheet-Datei. Damit einher geht die Herausforderung der Dateipflege und -organisation.

(Es war einmal) nur eine CSS-Datei genügte – alle Regeln waren zusammengefasst und es war einfach, sie hinzuzufügen, zu löschen oder zu ändern – aber diese Zeiten sind lange vorbei. Wenn Sie (jetzt) ​​eine neue Website erstellen, müssen Sie einige Zeit damit verbringen, zu planen, wie Sie das CSS organisieren und strukturieren.

Organisation von Dateien

Der erste Schritt beim Aufbau eines CSS-Systems ist die Formulierung einer Gliederung. (Ich denke) die Bedeutung der CSS-Organisationsplanung ist vergleichbar mit der Website-Verzeichnisstruktur. (htmloder Hinweis: Verwenden Sie übertriebene Wörter, um Ihr Gedächtnis zu verbessern) Es gibt keine allgemeingültige Lösung, daher werden wir einige grundlegende organisatorische Lösungen und ihre jeweiligen Vor- und Nachteile besprechen.

Haupt-CSS-Datei

Normalerweise können Sie eine Haupt-CSS-Datei verwenden, um die von allen Seiten gemeinsam genutzten Regeln zu platzieren. Diese Datei enthält Standardschriftarten, Links, Kopfzeilen und andere Stile. Nachdem die Haupt-CSS-Datei vorhanden war, begannen wir mit der Erforschung übergeordneter Organisationsstrategien.

Methode 1: Basierend auf dem Prototyp

Die grundlegendste Strategie besteht darin, CSS-Dateien basierend auf der Archetypseite zu trennen. Sind Startseite, Unterseiten und Portfolioseiten einer Website unterschiedlich gestaltet, kann eine prototypbasierte Strategie zum Einsatz kommen. (Bei dieser Strategie) Jede Seite verfügt über eine eigene CSS-Datei.

Wenn die Anzahl der Prototypen nicht groß ist, ist diese Methode einfach, klar und effektiv. Allerdings treten Probleme auf, wenn Seitenelemente nicht Schritt für Schritt in jeder Prototypseite lokalisiert werden. Wenn Unterseiten und Kombinationsseiten bestimmte Elemente gemeinsam haben, die Startseite jedoch nicht, was sollten wir tun?

Fügen Sie die gemeinsam genutzten Elemente in die Haupt-CSS-Datei ein. Dies ist nicht die reinste Lösung, funktioniert aber in bestimmten Situationen. Wenn die Site jedoch riesig ist, bläht sich die Haupt-CSS-Datei schnell auf – was den Zweck der Dateitrennung zunichte macht: den Import unnötig großer Dateien zu vermeiden.

Fügen Sie eine Kopie des Stilcodes in die CSS-Dateien der Kombinationsseite und Unterseite ein. (Dies zu tun) bedeutet, redundanten Code beizubehalten, und das wollen wir natürlich nicht.

Erstellen Sie eine neue Datei, die von diesen beiden Seiten gemeinsam genutzt wird. Das hört sich großartig an. Aber wenn es nur 10 Codezeilen gibt, erstellen wir diese Datei dann nur, um diese 10 Codezeilen zu teilen? (HTML oder Hinweis: Ein Huhn mit einem Messer töten?) Diese Methode ist sehr rein, aber wenn die Website riesig und vorhanden ist Gibt es viele Seiten, die eine kleine Anzahl von Elementen gemeinsam nutzen ( htmloder Hinweis: Wenn beispielsweise 30 Seitenpaare jeweils 10 Codezeilen gemeinsam nutzen), erscheint dies sehr umständlich.

Erstellen Sie eine separate CSS-Datei mit Stilen für alle gemeinsam genutzten Elemente. Diese Methode mag einfacher sein, sie hängt jedoch von der Größe der Site und der Anzahl der gemeinsam genutzten Elemente ab. Es gibt eine sehr ärgerliche Situation: Eine große CSS-Datei wird importiert, aber nur ein kleiner Teil des Stils wird auf der Seite verwendet – auch dies macht den ursprünglichen Zweck der Dateitrennung zunichte.

Das nenne ich das Überschneidungsdilemma. Es gibt viele Überschneidungen bei fragmentierten CSS-Regeln und es gibt keine völlig klare Möglichkeit, sie zu organisieren.

Methode 2: Basierend auf Seitenelementen/-blöcken

Wenn die Website serverseitiges Include verwendet, ist diese Methode sehr gut. Wenn Sie beispielsweise Header-Include verwenden, verfügt dieser über eine eigene entsprechende CSS-Datei. Das Einbinden in die Fußzeile oder andere Teile kann auf die gleiche Weise erfolgen, importieren Sie einfach Ihre eigene CSS-Datei. Diese Methode ist einfach und sauber, erzeugt jedoch möglicherweise viele kleine CSS-Dateien.

Wenn der Fußzeilenstil beispielsweise nur 20 Zeilen CSS-Code erfordert, lohnt es sich nicht, eine separate Datei zu erstellen. Und diese Methode führt dazu, dass jede Seite eine Reihe von CSS-Dateien enthält – denn es gibt so viele CSS-Dateien wie Include-Dateien.

Methode 3: Basierend auf Tags

Diese Lösung ist intuitiv und praktisch, ähnlich der vorherigen. Wenn die Website insgesamt 30 Seiten umfasst, von denen 10 Formulare enthalten, können Sie eine CSS-Datei erstellen, die speziell den Stil des Formulars berücksichtigt, und diese nur auf diesen 10 Seiten importieren. Wenn die anderen 10 Seiten Tabellen enthalten, erstellen Sie eine Datei speziell für die Verarbeitung von Tabellenstilen ... und so weiter.

Zusätzliche Organisationstipps

Zusätzlich zu den subjektiven Methoden zum Organisieren von Dokumenten müssen wir auch mehrere Medientypen wie Druck, Handheld-Geräte und Bildschirme berücksichtigen. Obwohl dies klar definiert ist, ist es dennoch ein Faktor, der bei der Festlegung der Dateistruktur berücksichtigt werden sollte. Sobald mehrere Medientypen unterstützt werden müssen, müssen möglicherweise einige Regeln in der Haupt-CSS-Datei überdacht werden.

Darüber hinaus kann auch Marken-Co-Branding ein wichtiger Faktor sein. (htmloder Hinweis: z. B. joga gemeinsam von Google und Nike ins Leben gerufen) Wenn es um Marken-Co-Branding geht, muss man sich überlegen, welche Elemente an die jeweils andere Marke angepasst werden sollen. Verwenden Sie beispielsweise jeweils unterschiedliche CSS-Dateien.

Es gibt einen weiteren Trick, der oft übersehen wird: Verwenden Sie verschachtelte @import-Anweisungen. Eine CSS-Datei kann erstellt werden, indem sie einfach eine Reihe von @import-Anweisungen enthält oder einige CSS-Regeln hinzufügt. Mit dieser Methode kann die Haupt-CSS-Datei der Website vollständig erstellt werden (verwenden Sie @import, um die Stildateien jedes Teils zu importieren). Wenn jede Seite Ihrer Website 4 oder 5 verschiedene CSS-Dateien importiert, sollten Sie diese Technik zweifellos in Betracht ziehen.

Organisation von Regeln und Selektoren

Nachdem wir über die Dateiorganisation gesprochen haben, besprechen wir nun, wie die Dinge in der Datei organisiert werden. Natürlich möchten wir die Datei reibungslos durchsuchen und schnell den zu bearbeitenden Selektor oder die zu bearbeitende Regel finden.

Redundanz vs. Abhängigkeit

Wie Dave Shea in seinem Artikel „Redundanz vs. Abhängigkeit“ sagte, muss man die Kaskade ständig verstehen. Sie müssen entscheiden, ob Sie Selektoren gruppieren (was Abhängigkeit bedeutet) oder sie trennen (was Redundanz bedeutet). Durch die Gruppierung kann der Code prägnant und prägnant gehalten werden, es werden jedoch Abhängigkeitsbeziehungen hergestellt, was zu einem erhöhten Wartungsaufwand führt. Ohne Gruppierung erhöhen Sie die Dateigröße und erschweren die Konsistenz ähnlicher Selektoren. Nur wenn wir diese Kompromisse und Kompromisse eingehen, können wir jedes Mal die richtige Entscheidung treffen.