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.
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;
typography.css
layouts.css
forms.css
lists.css auf
tables.css
carousel.css erforderlich
accordion.css
oder _config.scss Datei mit Farbvariablen usw. einbeziehen. _config.less
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
Anzahl der Dateien
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 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 Windows verwenden? Versuchen Sie das Dienstprogramm Sie können auch Ihre eigenen Verbindungsskripte in Bash, PHP, Python oder einer anderen Skriptsprache Ihrer Wahl schreiben. 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 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. @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. cat, um eine Verbindung zur Datei herzustellen: cat file1.css file2.css > combined-output-file.css
type: type file1.css file2.css > combined-output-file.css
Hinweis: CSS -Optimierung
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. häufig gestellte Fragen zur CSS -Dateiorganisation
Wie kann man meine CSS -Dateien am besten organisieren?
Wie kann ich meinen CSS -Code einfach und ordentlich halten?
Was sind CSS -Präprozessoren und wie helfen sie, CSS -Dateien zu organisieren?
Wie kann ich das CSS -Modul verwenden, um mein CSS zu organisieren?
Das Welche Rolle spielt die Kommentare in der CSS -Dateiorganisation?
Wie kann man das CSS -Framework verwenden, um meine CSS zu organisieren?
Welche Bedeutung hat eine konsequente Namenskonvention in CSS?
Wie kann ich CSS -Variablen verwenden, um meine CSS zu organisieren?
Mit Welche Rolle spielt CSS -Reset in der CSS -Dateiorganisation?
Wie kann man das CSS -Lint -Tool verwenden, um CSS organisiert zu halten?
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
