Meine Gedanken zum CSS-Framework und zu CSS-Modulen waren schon immer vage und ich folge voll und ganz dem Trend. Die Probleme, auf die ich kürzlich bei der Arbeit gestoßen bin, haben mich gezwungen, mich mit diesem Thema zu befassen. Ich bin es gewohnt, dass eine Person alles erledigt, die Seite plant, gestaltet und veröffentlicht. Wenn für ein Projekt mehrere Personen zusammenarbeiten und es in kurzer Zeit fertigstellen müssen, sind die Planung von Stildateien und die Überlegungen zu CSS-Modulen und Frameworks besonders wichtig.
Die folgende Frage beschäftigt mich in letzter Zeit: Wenn mehrere Personen gleichzeitig am Frontdesk einer Website arbeiten, wie verteilt man sie so, dass der Stil der gesamten Website einheitlich ist und die Stildateistruktur sinnvoll ist? Keine Duplizierung und Redundanz und die Effizienz ist am höchsten? Ich habe mehrere Klassenkameraden konsultiert und die Antworten, die ich erhalten habe, sind wie folgt zusammengefasst: Was die Vereinheitlichung des Stils betrifft, haben wir gemeinsam darüber gesprochen, zunächst eine Skizze zu erstellen, und eine Person hat eine Standardstilseite basierend auf der Skizze erstellt, und dann haben wir begonnen, zusammenzuarbeiten. und der Rest war eine ständige Modifikation. In Bezug auf die Produktion werden für die gesamte Site mehrere unterschiedliche CSS-Dateien festgelegt, und jede Person ist für unterschiedliche Stildateien verantwortlich.
Was leicht gesagt ist, ist nicht so einfach, wenn es einmal umgesetzt wird. Was das Design angeht, traue ich mich immer noch nicht, ein Risiko einzugehen. Zum Glück gibt es nicht viele Seiten auf der ersten und zweiten Ebene, und eine Person kann damit umgehen. Erzählen Sie uns etwas über den Produktionsprozess.
(1) CSS-Benennung, Schreibreihenfolge und Kommentare standardisieren.
Abgesehen von der Wichtigkeit dieses Punktes kann man sich kaum vorstellen, wie verwirrend es wäre, wenn mehrere „stark personalisierte“ Benennungsmethoden gleichzeitig in einem Stylesheet auftauchen würden. Für die Benennung können mittlere „-“- und „_“-Symbolverbindungen verwendet werden, z. B. „Textbox“, „Textinhalt“, „Textbox“ oder „Buckelschrift“ in Groß- und Kleinschreibung, „TextBox“, „TextContent“ usw. Kommentare sind sehr wichtig. Sie können in drei Hauptkategorien von Kommentaren unterteilt werden, z. B. Anmerkungen der zweiten Kategorie, Anmerkungen der zweiten Kategorie und Anmerkungen der dritten Kategorie Kommentiert innerhalb eines Selektors. Verwenden Sie Kommentare oder hacken Sie Kommentare zu einigen Spezialeffekten. Das Schreibformat kann horizontale Einrückungen verwenden, um hierarchische Beziehungen anzuzeigen.
(2) Bestimmen Sie die Strukturaufteilung des Stylesheets basierend auf den Renderings
Im Internet gibt es viele Einführungen zur Aufteilung der CSS-Dateistruktur, bei der es sich im Allgemeinen nur um wenige Dateien handelt: layout.css/main.css/footer.css/header.css/reset.css usw. Das sagt jeder Sie sind gut darin und müssen es üben, bevor sie umgesetzt werden. Verstehen Sie, dass es nicht das Beste gibt, sondern nur das Passendste. Die beste Stilaufteilung sollte eng von der HTML-Struktur selbst abhängen und nicht universell sein.
Neben der Erleichterung der zukünftigen Arbeitsteilung und Zusammenarbeit hat die Verteilung von CSS-Dateien auch einen sehr wichtigen Punkt: Wenn die Bytes klein sind, können sie so weit wie möglich komprimiert werden, um die Anzahl gleichzeitiger Verbindungen zu reduzieren Wenn sie groß sind, können sie geteilt werden, um zu verhindern, dass die Download-Geschwindigkeit zu langsam wird und das Laden des Styles beeinträchtigt. Hierbei handelt es sich um spezifische Probleme, die im Einzelfall geklärt werden müssen. Bei stark besuchten Seiten wie Suchmaschinen und Portal-Homepages ist es beispielsweise am besten, CSS in die Seite zu schreiben.
Entscheiden Sie sich vorab für die CSS-Stilstruktur:
Beispiel-Quellcode
reset.css /*Seitenstil neu laden*/
header.css /*Seitenweiter Header-Stil*/
footer.css /*Vollständiger Site-Fußzeilenstil*/
public.css /*Öffentlicher Modulstil für die gesamte Site*/
index.css /*Einzigartiger Stil der Startseite*/
container.css /*Textkörperstile der Stufe 2 und darunter*/
print.css /*Druckstil*/
ie.css /*IE-Hack*/
(3) Arbeitsteilung und Zusammenarbeit
Die Bühne ist aufgebaut und der Gesang beginnt. Finden Sie alle öffentlichen Textlisten und gemischten Bild- und Textlisten. Eine Person ist für das Schreiben im öffentlichen Modul verantwortlich, je eine Person für den Kopf und das Ende und eine Person für den sekundären Seitenrahmen. Der personalisierte Teil bleibt bis zum Ende übrig.
Im tatsächlichen Betrieb gibt es immer noch viele Probleme, die Coderedundanz nicht vermeiden und nur minimieren können. Manchmal müssen Opfer gebracht werden, um effizient zu sein. Das Obige ist nur ein kleiner Teil meiner Erfahrungen bei der Arbeit. Es ist auch das erste Mal, dass die Vorteile der CSS-Modularität wirklich ausgeschöpft werden: einfach zu modifizieren, einfach zu verwalten und einfach für die Zusammenarbeit mehrerer Personen. Ich freue mich darauf, mit den Experten darüber zu diskutieren.