CSS -Architektur: CSS -Dateiorganisation - SitePoint

Auszug aus einem Auszug aus dem Buch "The Master of CSS" von Tiffany Brown. Dieses Buch ist in Buchhandlungen auf der ganzen Welt erhältlich und Sie können die E-Book-Version hier auch kaufen.

CSS -Dateiorganisation

Teil einer guten CSS -Architektur befindet sich in der Dateiorganisation. Für einzelne Entwickler oder sehr kleine Projekte reichen einzelne Dateien aus. Für große Projekte - Websites mit mehreren Layouts und Inhaltstypen oder mehrere Marken teilen sich das gleiche Design -Framework - ist klüger, einen modularen Ansatz zu verwenden und CSS in mehrere Dateien aufzuteilen.

CSS in mehreren Dateien aufteilt, erleichtert es, den Teams Aufgaben zuzuweisen. Ein Entwickler kann für Stile im Zusammenhang mit der Typografie verantwortlich sein, während sich ein anderer Entwickler auf die Entwicklung von Netzkomponenten konzentrieren kann. Das Team kann eine vernünftige Arbeit zuordnen und die Gesamtproduktivität verbessern.

Was könnte eine gute Dateistruktur für die Aufteilung von CSS in mehrere Dateien sein? Hier ist eine Struktur, die dem ähnelt wie in jüngsten Projekten:

• reset.css: Styles zurücksetzen und normalisieren;
• : Schriftart, Schriftgewicht, Linienhöhe, Größe und Stil von Titel und Text typography.css
• : Seitenlayout- und Absatzstile verwalten, einschließlich Grids layouts.css
• : Stilsteuerungen und Beschriftungen forms.css
• : Listen Sie einen spezifischen Stil auf lists.css auf
• : Tabellenspezifischer Stil tables.css
• : Stile für Karussellkomponenten carousel.css erforderlich
• : Stil der Akkordeonkomponente accordion.css

Wenn Sie einen Präprozessor wie SASS oder weniger verwenden, müssen Sie möglicherweise auch eine

oder _config.scss Datei mit Farbvariablen usw. einbeziehen. _config.less

In dieser Struktur hat jede CSS -Datei einen bestimmten und engen Bereich. Die Anzahl der zu verwendenden Dateien hängt davon ab, wie viele visuelle Muster oder Komponenten das Website -Design benötigt.

CSS -Frameworks wie Foundation und Bootstrap verwenden diesen Ansatz. Beide sind sehr akribisch und verwenden separate Dateien für Fortschrittsbalken, Bereichseingänge, Schließen von Schaltflächen und Tooltips. Auf diese Weise können Entwickler nur die vom Projekt erforderlichen Komponenten einbeziehen.

Hinweis: Modusbibliothek

Das Konzept, das eng mit der Aufteilung von CSS in mehrere Dateien zusammenhängt, ist die Schema -Bibliothek. Anna Debenhams "Anfänger der Musterbibliothek" ist eine großartige Einführung in das Thema.

Anzahl der Dateien

Auch wenn wir mehrere CSS -Dateien in der Entwicklung verwenden, werden wir nicht alle Dateien dem Browser in diesem Formular zur Verfügung stellen. Die Anzahl der erforderlichen HTTP -Anfragen verlangsamt das Laden der Website. Stattdessen verbinden wir die kleinere CSS -Datei

in mehrere größere Dateien für die Verwendung in Produktionsumgebungen.

In diesem Zusammenhang bedeutet Verbindung, mehrere Dateien zu einem einzelnen CSS -Laden zu kombinieren. Es beseitigt die Notwendigkeit einer @import -Antage oder mehrere link Elemente. Der aktuelle Browser hat eine Grenze für die Anzahl der Dateien, die gleichzeitig heruntergeladen werden können. Wir können Verbindungen verwenden, um die Anzahl der Netzwerkanforderungen zu reduzieren und so Inhalte schneller an Benutzer zu liefern.

Normalerweise übernimmt Ihr Web -Development -Framework Verbindungen im Rahmen seiner Vermögensverwaltungsfunktionen wie Ruby on Rails. Einige Content-Management-Systeme tun dasselbe, sei es als Kernfunktionalität oder Add-Ons. Der in Kapitel 9 beschriebene Präprozessor erleichtert auch die Verbindung. Wenn weder der Präprozessor noch der Entwicklungsrahmen Teil Ihres Workflows sind, verfügt Ihr Betriebssystem höchstwahrscheinlich über ein Verbindungsdienstprogramm, das Sie verwenden können.

Für Mac OS X oder Linux verwenden Sie das Dienstprogramm cat, um eine Verbindung zur Datei herzustellen:

cat file1.css file2.css > combined-output-file.css

Windows verwenden? Versuchen Sie das Dienstprogramm type:

type file1.css file2.css > combined-output-file.css

Sie können auch Ihre eigenen Verbindungsskripte in Bash, PHP, Python oder einer anderen Skriptsprache Ihrer Wahl schreiben.

Hinweis: CSS -Optimierung

Verbindung ist ein Aspekt der CSS -Optimierung. Es ist auch wichtig, Ihre Datei zu minimieren, um unnötige Zeichen und Räume zu entfernen. Kapitel 3 führt das Minimierungsinstrument vor.

Wie viele Dateien sollten Sie verwenden? Dies ist der schwierige Ort. Die beste Praxis ist derzeit darin, Ihren kritischen Pfad CSS zu identifizieren - die Mindestmenge an CSS, die für das Rendern von Seiten erforderlich sind - und sie mit dem style -Element in Ihre Seite einbinden. Andere CSS -Dateien sollten mit JavaScript geladen werden. Addy Osmanis Präsentation "CSS Performance Tools" bietet einen hervorragenden Überblick über diese Technologie und einige der Tools, mit denen Sie sie implementieren können. Siehe auch LoadCSS für die Filamentgruppe.

Wenn Ihr Inhalt mit SPDY- oder HTTP/2 -Protokollen serviert wird, kann die Verbindung nicht erforderlich sein. Mithilfe von HTTP/1.1 startet das Browser die Vermögenswerte nacheinander. In diesem Modell kann die Anzahl der Netzwerkanfragen die Website -Leistung verbessern. Die Reduzierung der Anzahl der Anfragen hat daher keinen praktischen Nutzen. Es gibt jedoch Kosten, um mehr Bytes zu senden, als eine Seite rendern muss. William Chans "HTTP/2 Notes and Kompromies" und Kompromisse "erklärt dies ausführlicher. Am besten bestimmen Sie, ob Ihr Server HTTP/2 -Dienste bereitstellt. Wenn Sie ja, prüfen Sie, ob mehr Benutzer Ihre Vermögenswerte tatsächlich aufteilen und nur die für die Seite erforderlichen Vermögenswerte laden, oder verwenden Sie die alte Methode weiter. Wenn Sie mehr über Leistungsoptimierungsmethoden erfahren möchten, ist das Buch Lean Site von SitePoint eine nützliche Ressource.

häufig gestellte Fragen zur CSS -Dateiorganisation

Wie kann man meine CSS -Dateien am besten organisieren?

Der beste Weg, um CSS -Dateien zu organisieren, hängt stark von der Größe und Komplexität des Projekts ab. Für kleinere Projekte kann eine einzige CSS -Datei ausreichen. Für größere Projekte wird jedoch empfohlen, CSS in mehrere Dateien aufzuteilen. Dies kann basierend auf den Komponenten oder Seiten erfolgen, die sie stylen. Sie können beispielsweise eine CSS -Datei für Header, Fußzeile und Hauptinhalte separat erstellen. Dies erleichtert Ihr Code leichter zu warten und zu debuggen.

Wie kann ich meinen CSS -Code einfach und ordentlich halten?

CSS -Code einfach und ordentlich halten, ist für die Wartbarkeit von wesentlicher Bedeutung. Sie können dies tun, indem Sie einige Best Practices folgen. Verwenden Sie zunächst Kommentare, um die Rolle jedes Teils von CSS zu beschreiben. Zweitens kombinieren Sie die relevanten Stile miteinander. Drittens verwenden Sie eine konsistente Namenskonvention für Ihre Klasse und ID. Erwägen Sie schließlich die Verwendung eines CSS -Präprozessors wie Sass oder weniger, um Ihre Stylesheets zu verwalten.

Was sind CSS -Präprozessoren und wie helfen sie, CSS -Dateien zu organisieren?

CSS -Präprozessoren wie Sass und weniger sind Skriptsprachen, die die CSS -Funktionalität erweitern. Sie ermöglichen es Ihnen, Variablen, verschachtelte Regeln, Mixins und Funktionen zu verwenden, die Ihre CSS erheblich vereinfachen und die Aufrechterhaltung erleichtern können. Der Präprozessor kompilt Ihren Code in Standard -CSS, den der Browser verstehen kann.

Wie kann ich das CSS -Modul verwenden, um mein CSS zu organisieren?

Das

CSS -Modul ist eine Möglichkeit, Ihr CSS modularer und wiederverwendbarer zu gestalten. Mit dem CSS -Modul verfügt jede Komponente in Ihrer Anwendung über eine eigene CSS -Datei. Dies erleichtert das Verwalten Ihres Stils, da das Ändern des CSS einer Komponente andere nicht beeinflusst. Um CSS -Module zu verwenden, benötigen Sie ein Build -Tool wie WebPack oder Paket.

Welche Rolle spielt die Kommentare in der CSS -Dateiorganisation?

Anmerkungen spielen eine entscheidende Rolle bei der Organisation von CSS -Dateien. Sie können Ihnen und anderen Entwicklern helfen, die Rolle jedes Teils von CSS zu verstehen. Dies ist besonders wichtig in großen Projekten, da Sie möglicherweise mehrere CSS -Dateien haben. Kommentare können auch verwendet werden, um bestimmte Teile von CSS während des Debuggens vorübergehend zu deaktivieren.

Wie kann man das CSS -Framework verwenden, um meine CSS zu organisieren?

CSS-Frameworks wie Bootstrap und Foundation bieten Write-PRE-CSS, mit denen Sie Ihre Website stylen können. Sie bieten auch eine einheitliche Struktur für Ihr CSS, um die Aufrechterhaltung zu erleichtern. Denken Sie jedoch daran, dass die Verwendung von CSS -Frameworks der Website unnötig aufbläht, wenn Sie die meisten Funktionen nicht verwenden.

Welche Bedeutung hat eine konsequente Namenskonvention in CSS?

Die konsistente Namenskonvention in CSS erleichtert Ihr Code leichter zu lesen und zu verstehen. Sie erleichtern auch einfacher, bestimmte Stile zu finden, wenn Sie Ihren Code aktualisieren oder debuggen müssen. Sie können mehrere Namenskonventionen wie BEM (Block, Element, Modifikator), OOCSS (objektorientierte CSS) und SMACS (skalierbare und modulare CSS-Architektur) befolgen.

Wie kann ich CSS -Variablen verwenden, um meine CSS zu organisieren?

Mit

CSS -Variablen (auch als benutzerdefinierte Eigenschaften bezeichnet) können Sie spezifische Werte für die Wiederverwendung in CSS speichern. Dies kann Ihr CSS erheblich vereinfachen und die Aufrechterhaltung erleichtern. Sie können beispielsweise die Hauptfarbe Ihrer Website als Variable speichern und sie verwenden, wenn Sie diese Farbe benötigen.

Welche Rolle spielt CSS -Reset in der CSS -Dateiorganisation?

CSS Reset ist eine Reihe von Stilen, die zu Beginn von CSS angewendet werden und die Standardstile der Browseranwendung zurücksetzen. Dies stellt sicher, dass Ihre Website für verschiedene Browser konsistent aussieht. Das CSS -Reset erleichtert auch Ihr CSS zu verwalten, da Sie für jedes Element keinen Browserstil umschreiben müssen.

Wie kann man das CSS -Lint -Tool verwenden, um CSS organisiert zu halten?

CSS -Lint -Tools wie Stylelint und CSSLINT können Ihnen dabei helfen, CSS zu organisieren, indem Sie Fehler fangen und konsistente Codierungsstile durchsetzen. Sie können in Ihren Entwicklungsworkflow integriert werden, um Ihre CSS beim Schreiben automatisch zu überprüfen. Dies kann Ihnen helfen, einen Reiniger zu schreiben, der CSS leichter aufrechterhalten kann.

Das obige ist der detaillierte Inhalt vonCSS -Architektur: CSS -Dateiorganisation - SitePoint. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!