Mein CSS-Architekturkonzept – es ist von Person zu Person unterschiedlich, es gibt kein Bestes, nur das Passende
|
Vorwort <br />Ich arbeite schon eine ganze Weile im Front-End-Bereich und auch schon lange im Bereich CSS. Rückblickend gibt es viele Fähigkeiten und Kenntnisse, die ich nie vergessen werde, wenn ich sie erst einmal beherrsche, z. B. wie man Dreiecke ohne Bilder implementiert, wie man unter IE durchscheinende Effekte erzielt usw.; manche Dinge erfordern jedoch bei der tatsächlichen Projektimplementierung ständige Rückschläge und Zusammenfassungen und dann wieder Rückschläge und Zusammenfassungen. Man muss langsam eine Methode finden, die zu einem passt, und diese Methode dann zur Entwicklung befolgen, um mit halbem Aufwand das doppelte Ergebnis zu erzielen. Dieser Artikel gehört zu letzterem, da er auf der allgemeinen Richtung des gesamten CSS basiert. Für Anfänger oder Studenten, die nicht über ausreichend praktische Projekterfahrung verfügen, wird empfohlen, dass Sie sich nicht zu sehr darum kümmern, wenn es Teile gibt, die Sie nicht verstehen. Sie können es überspringen oder eine Nachricht hinterlassen, um Fragen zu stellen. Erfahrene Leute haben vielleicht einige Beschwerden und meinen, dass sie sich von Ihren unterscheiden, aber ich möchte sagen, dass die CSS-Architektur von Person zu Person und von Projekt zu Projekt unterschiedlich ist. Es gibt keine optimale, nur eine geeignete! Beginnen Sie mit der Semantik. <br />Wenn Sie hervorragende Bücher wie „CSS Zen Garden“ lesen, werden Sie feststellen, dass die HTML-Semantik immer am Anfang erwähnt wird. Was ist semantisches HTML? Eigentlich ist es ganz einfach. HTML hat nur wenige Tags. Das Tabellen-Tag wird für Tabellen verwendet, das p-Tag für Artikelabsätze und die h-Tags für Überschriften. Verwenden Sie auf der gesamten HTML-Seite nicht alle div+span außer a. Es muss gesagt werden, dass XHTML gewisse Einschränkungen bei der Definition von Tags aufweist, sodass HTML5 viele strukturierte Tags hinzugefügt wurden. Aus dieser Perspektive ist auch die Semantisierung von HTML sehr wichtig und wurde als Standard etabliert. Warum sollten wir HTML semantisch machen? Streng genommen müsste dieser Punkt im vorherigen Absatz enthalten sein. Der Grund, warum er hier herausgenommen wird, liegt darin, dass er eng mit dem Zweck dieses Artikels zusammenhängt. Allerdings ist es derzeit noch unmöglich, das zu sagen. Ich möchte Sie nicht auf die Folter spannen, aber wenn wir es jetzt ansprechen, wird es schwierig, es klar zu erklären, und alle werden verwirrt sein. Wenn Sie geduldig sind und weiterlesen, werden Sie es verstehen. Bilder und Text---Mein CSS-Architekturkonzept (Abbildung 1 ) (Abbildung 2 ) Abbildung 1 zeigt die CSS-Verzeichnisstruktur meines aktuellen Projekts und Abbildung 2 ist ein Screenshot, den ich in MindManager gemacht habe. Beide Abbildungen werden für meinen nächsten Artikel eine große Hilfe sein. Aus Abbildung 2: 1. Universelle CSS-Bibliothek (global.css): Dieses Stylesheet kann auf allen Websites verwendet werden. Solange es sich um eine Website handelt, können Sie dieses Stylesheet importieren. Es umfasst alle Aspekte von CSS, wie z. B. CSS-Reset-Stil, CSS-Layout-Stil, Rand, Schriftart, Schriftgröße, Ausrichtung. Die universelle CSS-Bibliothek ist ein direktes Spiegelbild des CSS-Prinzips der Stiltrennung (die hier erwähnte Stiltrennung und das als nächstes besprochene Prinzip der Stilkombination sind zwei relativ komplexe Konzepte. Um sie gut zu verstehen, bedarf es eines weiteren Artikels, der sie erklärt. Glücklicherweise gibt es noch solche Artikel. Wenn Sie Zeit haben, können Sie den Blog-Artikel von Zhang Xinxu, einem Front-End-Experten, lesen: CSS-Stiltrennung und -Neutrennung, CSS-Stilzusammenführung und Modularisierung. Meine universelle CSS-Bibliothek ähnelt der im Internet verfügbaren. Wenn Sie sie benötigen, finden Sie sie direkt in den verwandten Artikeln von Zhang Xinxu. Im Folgenden finden Sie einen Screenshot meiner universellen CSS-Bibliothek:
3. Einzelseiten-CSS (alle Stylesheets im Seitenverzeichnis): Genau wie das Homepage-Stylesheet wie index.css hat jede Seite ein unabhängiges. Dies dient dazu, das durch Umbenennen verursachte Stilkonfliktproblem zu lösen. Dieses Problem wird immer deutlicher, je größer das Projekt und je komplexer die Seitenstruktur wird. Nachdem die Seite unterschiedliche Stylesheets aufgerufen hat, kommt es zu keinem Konflikt, auch wenn die HTML-Seite den gleichen Stylenamen verwendet. 4. Vom Plug-In verwendetes CSS: Das in diesem Verzeichnis verwendete CSS ist im Wesentlichen das relevante Stylesheet des referenzierten JS-Plug-Ins. Der Grund, warum es in einen Ordner aufgeteilt ist, ist die einfachere Wartung. Die obigen vier Punkte erklären grob meine CSS-Architektur. Wenn jeder Punkt im Detail erklärt wird, gibt es viel zu besprechen, wie beispielsweise die in den vorherigen ein oder zwei Punkten erwähnten Prinzipien zur Stiltrennung und -kombination. Wenn Sie diesen Artikel nicht vollständig verstehen, wird empfohlen, zuerst verwandte Artikel zu lesen. Ist dies das Ende des Artikels? Die Antwort ist nein. Modularisieren Sie Ihr Stylesheet . <br />An dieser Stelle können wir darüber sprechen, warum wir HTML semantisch gestalten müssen. Haben Sie die Angewohnheit, ein Div zu schreiben, einen Stilnamen zu definieren, ein weiteres Tag in das Div zu schreiben, einen weiteren Stilnamen zu definieren und dann den Stil in das entsprechende CSS zu schreiben? Ja, wer war das nicht! Ich glaube jedoch nicht, dass das ein guter Ansatz ist. Es gibt zwei negative Punkte: 1. Man muss viel Energie darauf verwenden, über die Benennung des Stils nachzudenken. Benennung ist so eine widerliche Sache; 2. Geben Sie diese Schreibmethode auf und wechseln Sie zu modularen Verarbeitungsstilblättern. Dann werden Sie nach und nach die semantischen Prinzipien von HTML annehmen. Das ist keine Lüge, bitte fahren Sie fort. So modularisieren Sie Ihre Stylesheets Die Bedeutung von Modul : Nach meinem Verständnis ist ein Modul eine Sammlung von Elementen mit gleicher Geschäftslogik und gleichen oder ähnlichen Funktionen, so dass der Benutzer denkt, diese Elemente sollten zusammengefügt werden. Beispielsweise der Abschnitt „Personen, die interessiert sein könnten“ auf der Weibo-Startseite nach dem Einloggen:
Der Verarbeitungscode von Weibo für dieses Modul kann mit Firebug angezeigt werden. Er ist ziemlich kompliziert. Wenn ich den Code für dieses Modul darlegen würde, wäre er sehr einfach. Ich würde ihn so schreiben: Code kopieren Der Code lautet wie folgt:<div Klasse="Freund_Liebe"> <h2>Personen, die interessiert sein könnten</h2> <ul> <li></li> </ul> <em>Jemanden finden</em> <span></span> <a class=”more”>Mehr</a> </div> Versuchen Sie zu verstehen, warum ich es so geschrieben habe. Jede Codezeile wird berücksichtigt, einschließlich der Stilbenennung. Ich sage nicht, dass die Front-End-Mitarbeiter von Weibo nicht gut sind, denn das Schreiben des Front-End-Codes muss entsprechend dem Projektplan und der Präsentation der Back-End-Daten angepasst werden. Wenn Sie jedoch nur Front-End-Code schreiben, sollte der Code, den Sie zum ersten Mal schreiben, einfach genug sein und eine klare Semantik aufweisen. Über den obigen HTML-Code können Sie Ihr Layout in Ihrem eigenen Stil gestalten: Code kopieren Der Code lautet wie folgt:.friend_love h2{} .Freund_Liebe ul{} .friend_love em{} .friend_love span{} .Freund_Liebe .mehr{} Sie können in Ihrem Stylesheet auch einen Kommentar abgeben: /*friend_love*/; Wenn Sie ein solches Modul auf einer anderen Seite aufrufen müssen, können Sie es sehr gut kopieren. Machen Sie sich mit einem solchen Modul und zwei Stilnamen immer noch Sorgen um die Benennung? Vielleicht muss das em-Element nur den Stil float:left ausfüllen. Dann herzlichen Glückwunsch, Sie müssen diesen Stil nicht einmal schreiben. Rufen Sie den Stil einfach in global.css im Struktur-Tag auf: <em class=”fl”></div>. Warum heißt es fl? Bitte beachten Sie die Definition des links schwebenden Stils in global.css. Wie ich bereits sagte, ist die CSS-Architektur von Person zu Person und von Projekt zu Projekt unterschiedlich. Ich habe keinen Grund, warum Sie meinen Ansatz übernehmen sollten, dessen Ausgereiftheit und Sinnhaftigkeit noch nicht bestätigt wurde. Ich denke nur, dass er verwendet werden kann und einfach zu verwenden ist. Ich werfe nur ein paar Ideen in den Raum! |
<<: Ein Leistungsfehler bei MySQL-Partitionstabellen
>>: Die endgültige Lösung für Chromes Mindestschriftgrößenbeschränkung von 12px
Artikel empfehlen
Detaillierte Erläuterung der Konzepte und Verwendung von Docker Swarm
Docker Swarm ist ein von Docker entwickelter Cont...
Docker fügt eine Brücke hinzu und legt den IP-Adressbereich fest
Ich weiß nicht, ob es daran liegt, dass die Binär...
Ausführliche Erläuterung der MySQL-Benutzerkontenverwaltung und Berechtigungsverwaltung
Vorwort Die MySQL-Berechtigungstabelle wird beim ...
HTML-Tabellen-Tag-Tutorial (33): Attribut für vertikale Zellenausrichtung VALIGN
In vertikaler Richtung können Sie die Zellenausri...
Neue Funktionen in MySQL 8.0 - Einführung in die Verwendung des Management-Ports
Inhaltsverzeichnis Vorwort Verbindungsverwaltung ...
Einige Tipps zur Verwendung von Less in Vue-Projekten
Inhaltsverzeichnis Vorwort 1. Stildurchdringung 1...
15 JavaScript-Funktionen, die es wert sind, gesammelt zu werden
Inhaltsverzeichnis 1. Zahlen umkehren 2. Holen Si...
Praxis der Implementierung der Benutzeranmeldung durch Front-End- und Back-End-Interaktion von Node.js
Inhaltsverzeichnis 1. Projektanforderungen Zweite...
Erstellen privater Mitglieder in JavaScript
Inhaltsverzeichnis 1. Verwende Closures 2. Verwen...
Vue.js Leistungsoptimierung N Tipps (es lohnt sich, sie zu sammeln)
Inhaltsverzeichnis Funktionskomponenten Aufteilun...
Detaillierte Erläuterung der Linux-Textverarbeitungstools
1. Zählen Sie die Anzahl der Benutzer, deren Stan...
CSS 3.0 Text Hover Jump Spezialeffekte-Code
Hier ist ein mit CSS 3.0 implementierter Textschw...
Installieren Sie das Linux-System automatisch basierend auf Cobbler
1. Komponenten installieren yum install epel-rpm-...
Detailliertes Tutorial zur Installation von Spring-Boot-Anwendungen auf Linux-Systemen
Unix/Linux-Dienste systemd-Dienste Betriebsablauf...
Tiefgreifendes Verständnis von Javascript-Prototypen und Prototypenketten
Inhaltsverzeichnis 1. Was ist ein Prototyp? 2. Pr...