Regeln zum Erstellen eines CSS-Frameworks für Portal-Websites_Erfahrungsaustausch

Teil 1: Was wir beim Aufbau eines CSS-Frameworks erreichen wollen:

1. Standardisierung und Frontend-Implementierung mit Anpassungsfähigkeit an Mainstream-Plattformen implementieren;
Nachdem der Site-Stil festgelegt wurde, sollte das Frontend nicht zum Engpass des gesamten Projekts werden 3. Refactoring-Anforderungen, Klassen und Blockstile so weit wie möglich wiederverwendbar machen;
4 Separate Struktur- und Leistungsanforderungen, Einhaltung der Konventionen der semantischen Struktur
5 des Finanznetzwerks.
6. Führen Sie die erforderliche Suchmaschinenoptimierung am Code durch.

Teil 2: Einige Konventionen zur CSS-Benennung:

1. Verwenden Sie keine Großbuchstaben für Klassennamen und ID-Namen.

2. Versuchen Sie, eine Kombination aus beschreibenden englischen Wörtern als Klassennamen und ID-Namen zu verwenden Verwenden Sie „_“-Bindestriche, um Wörter zu trennen;
Als nächstes müssen wir die gesamte Website und den Designentwurf analysieren, um ein CSS-Framework zu erstellen, das zu den Merkmalen unserer eigenen Portalstruktur passt

Wir haben Sina.com als Beispiel genommen:

Site-Strukturanalyse durchführen:

Die gesamte Seite ist unterteilt in: Startseite, Weitere Seiten, Inhaltsseite, Themenseite, Datencenter, Nachrichtencenter, Kanalseite, Werbung...

Wir organisieren diese Seiten, um ihre gemeinsamen Teile zu finden: CSS-Stile, Regionen und Modulfragmente. Wir müssen diese gemeinsamen Teile extrahieren.

Nach der Beobachtung können wir CSS in die folgenden Kategorien einteilen:

Haupt-Stylesheet: sjweb.css

Schriftart (eine Sammlung von Schriftstilen, Schriftgrößen und Farben)

Layout (eine Sammlung von Rahmenstrukturen)

Global (eine Sammlung globaler Standardstile)

Komponente (Komponentenseite Teil-Stylesheets, Modulfragmentsammlungen)
Diese werden alle in das Haupt-Stylesheet von sjweb.css importiert. Das Haupt-Stylesheet dient als Loader zum Laden neuer externer Stile,
z Werbe-Stylesheets.
Auf diese Weise müssen diese Seiten nur einen kleinen CSS-Stilcode schreiben, der ihren eigenen speziellen Anforderungen entspricht.

Beim Aufbau dieses CSS-Frameworks gibt es viele Details, die vereinheitlicht werden sollten, wie z. B. Zeilenabstand, Abstand zwischen Modulen usw.

Das Folgende ist das Homepage-Strukturdiagramm eines Portals:

Regeln: Der Abstand zwischen allen Bereichen, Modulen, oben, unten, links und rechts beträgt: 8 Pixel; 20 Pixel; …Warten

Passen Sie die Umgebung an: IE7, ff, IE6, IE5.x, Opera.

PS: Tatsächlich kommt es beim Bau mehr auf die Details an, deshalb werde ich nicht auf Details eingehen. Haha