Um CSS effektiver zu verwalten, erläutert Sofish im Folgenden die Konzepte und Perspektiven von „modularem CSS“.
In den frühen Tagen des CSS-Lernens kam ich mit dem Konzept des „modularen CSS“ in Berührung, verstand es jedoch nie richtig. Apropos, der Grund ist ganz einfach: Da fast der gesamte Code für das Design des Blogs bestimmt ist und für eine so kleine Struktur wie ein Blog aufgrund der Menge an Code überhaupt nicht viele CSS-Dateien erforderlich sind selbst ist klein und es gibt nicht viele Seitenvorlagen, die unterschiedliche Ausdrücke verwenden. Weniger ist bequemer zu verwalten. Daher ist mein Verständnis von modularem CSS sehr verwirrend, was mich direkt zu der Annahme führt, dass die folgende Unterteilungsmethode sehr sinnvoll ist:
reset.css // Den Standardstil des Browsers zurücksetzen.
layout.css //Verwalten Sie das Layout der Seite
typeset.css // Grafik- und Textanordnung und
color.css // Einheitliche Verwaltung der Farbanpassung
print.css //Druckeffektstil
ie.css // Es stimmt nicht, dass ich vor Kurzem mit der Website des Unternehmens in Kontakt gekommen bin, um seine eigenen CSS-Schreibspezifikationen sowie einige einheitliche HTML-Spezifikationen zu schreiben Kanäle/Seiten/Shops. Erst dann wurde mir klar, dass die obige Einteilung noch zu idealistisch war. Persönlich denke ich, dass die folgende Divisionsmethode verwendet werden kann. Schreiben wir es zuerst auf und vergleichen wir dann diese beiden Teilungsmethoden, um eine geeignete modulare CSS-Teilungsmethode zu finden, die die CSS-Dateiverwaltung besser löst:
reset.css
header.css // Alle Stile des Headers
container.css // Stil des mittleren Bereichs außer Kopfzeile/unten
footer.css // Unterer Stil
print.css
dh.css
Wir können sehen, dass es drei verschiedene CSS-Dateien gibt. Die erste Aufteilungsmethode ist ein guter Ansatz, aber schwieriger zu verwalten. Obwohl sie „modular“ ist, ist der Stil des angezeigten Inhalts getrennt. Da es jedoch unmöglich ist, dass jeder den Inhalt jeder CSS-Datei zu 100 % versteht, kann es zu folgenden Problemen kommen:
1. Effizienzprobleme und das ultimative Ziel liegen im Inhalt der Website Wenn der Inhalt eines bestimmten Bereichs Wird geändert, wie oft kann es dauern, das gesamte CSS zu ändern? Was ursprünglich eine einfache Modifikation war, begann dadurch kompliziert zu werden. Wenn wir außerdem mehrere Änderungen vornehmen, übersehen wir möglicherweise etwas und müssen weiter debuggen. Dies verzögert nicht nur die Verwirklichung des endgültigen Ziels, sondern führt auch zu einem Effizienzproblem.
2. Rufen Sie so wenige CSS-Dateien wie möglich auf. In den meisten Fällen wird eine Website in Kopf, Mitte und Ende unterteilt. Und im Allgemeinen werden Kopf und Ende nicht geändert nur der mittlere Teil wird geändert. Auf diese Weise müssen alle CSS-Dateien aufgerufen werden, da die Modularität von HTML und CSS nicht konsistent ist. Dadurch wird der Server stärker belastet. Das ist ein Aspekt. Ein weiterer Aspekt besteht darin, dass wir möglicherweise viel Code zur Prioritätsauswahl schreiben müssen, wenn einige Elemente auf der neuen Seite mit anderen Seiten in Konflikt stehen, wodurch sich die Codemenge erhöht. Nichts davon ist das, was wir wollen. Aus diesem Grund sollten header.css und footer.css getrennt werden.
3. Probleme bei der Zusammenarbeit mit mehreren Personen. Wenn mehr als einer von uns arbeitet, kann die Arbeitsteilung darin bestehen, dass jemand oben die Navigation ausfüllt, jemand unten die Suchleiste ausfüllt und jemand den Aufbau des Neuen abschließt Seite in der Mitte. Auf diese Weise ändert jeder mehrere Dateien gleichzeitig und die Dinge, die er ändert, sind unterschiedlich. Wenn Sie auf den Server aktualisieren möchten, müssen Sie zuerst vergleichen und dann aktualisieren. (Natürlich gibt es mittlerweile Software wie die Versionsverwaltung. Wenn man aber gleichzeitig arbeitet, ist auch die Version ein Problem. Man muss davon ausgehen, dass Updates vielleicht nie etwas daran ändern werden.)
Fazit:
Natürlich ist die obige Divisionsmethode nur ein einfaches Modell. Die Architektur verschiedener Websites erfordert möglicherweise eine detailliertere Klassifizierung. An dieser Stelle muss daran erinnert werden, dass wir uns bei modularem CSS immer darüber im Klaren sein sollten, dass wir dazu da sind, die Verwaltung, Änderung und Zusammenarbeit zwischen mehreren Personen zu erleichtern und nicht nur eine einfache Aufteilung. Wenn ich Vorschläge habe, denke ich, dass die Modularität von CSS mit der Modularität von HTML übereinstimmen sollte. Hier besteht Konsens darüber, dass die Aufteilung von Dateien oder CSS-Inhalten mit der Modularität von HTML im Einklang steht. Dies wird für unsere Arbeit von größerem Nutzen sein.
Und was denkst du?