CSS-Tutorial zum CSS-Framework-Webdesign

Ich persönlich habe einige Erfahrungen in der Entwicklung von CSS-Frameworks zusammengefasst und mich lächerlich gemacht. Ich hoffe, dass Ihre Diskussion es uns ermöglicht, gemeinsam Fortschritte zu machen. :)

1. CSS-Framework
Chinas Internetindustrie hat sich seit 10 Jahren entwickelt, und Browser haben sich auch vom frühesten populären NS zum aktuellen FF3.IE7 usw. weiterentwickelt ... Die Position von Front- Endentwicklungsingenieur wurde ebenfalls geboren. In den letzten Jahren ist in der Webentwicklung ein sehr beliebtes Wort aufgetaucht: „Framework“. JavaScript-Frameworks wie YUI, JQuery und Prototype sind in der Tat zu leistungsstarken Werkzeugen für Front-End-Entwicklungsingenieure bei der Entwicklung von Websites geworden. Warum? Da das Framework Tools, Funktionsbibliotheken, Konventionen und Versuche enthält, gemeinsame Module von gemeinsamen Aufgaben zu abstrahieren, die wiederverwendet werden können, können Designer und Programmierer wiederholte Entwicklungen vermeiden. Um es für den Laien auszudrücken: Es spart die meiste Zeit bei sich wiederholenden Arbeiten.

Das Gleiche gilt für das Schreiben von CSS. Von Anfang an ging es nur um die Definition der Textfarbe und des Inhaltslayouts, bis hin zur Definition aller Leistungen. Das CSS-Framework hat nach und nach mehr Aufmerksamkeit erhalten, da jeder erkennt, dass das Extrahieren abstrakter Module aus konkreten Ausdrücken zur Wiederverwendung das wichtigste Mittel ist, um Benutzer-Downloads zu reduzieren und die Team- und Einzelentwicklung zu erleichtern.

2. Entwicklungssequenz des CSS-Frameworks
a) Formatieren Sie reset.css

Der eigentliche Vorteil der CSS-Formatierung besteht darin, dass sie schnell mit der Arbeit beginnen kann und Sie sie in einem neuen Format einführen können HTML-Datei Das Framework macht das Zurücksetzen von Abständen und Rändern überflüssig und sorgt so für ein einheitliches Layout und die gleiche Leistung im Browser.

b) Layout layout.css

Definieren Sie, ob die Seite zweispaltig oder dreispaltig, Vollbild oder 1024×768 ist...

Das Design von Eine Website kann viele Arten von Layouts enthalten, die meisten bestehen jedoch aus mehreren wiederverwendbaren Layouts. Durch die selektive Einführung der erforderlichen Layouts kann das gewünschte Seitenlayout schnell angewendet werden.

c) Grundstil type.css

Definieren Sie die Schriftgröße und Farbe des Körpers, h1-h6, a:link-a:active, p usw.
CSS-Referenz im Basisstil, zum Beispiel die Definition der UL-Klasse als „UL-Text“, um das gleiche Symbol, den gleichen Zeilenabstand und die gleiche Linkfarbe anzuzeigen.
Es kann auch so angewendet werden: class="ul-text quadrat", das quadratische Symbol wird vor dem li angezeigt.

　d) Tabellenänderung table.css

　 Definieren Sie die Leistung von Tags wie table, tr, td, th, thead, tfoot, tbody und caption.
Es ist das gleiche wie der Grundstil, aber die Darstellungsform der Tabelle auf der bestehenden Website besteht fast ausschließlich aus Datenverarbeitung, sodass die Referenzen separat gespeichert werden. Wenn beispielsweise Tabellenstil-1 auf eine Tabelle angewendet wird, handelt es sich um eine Tabelle mit schwarzem Rand und Tabellenstil-2 um eine Tabelle mit gelbem Rand.

e) Formularänderung form.css

Definieren Sie die Leistung von Fieldset-, Label-, Button-, Input-, Select- und Textarea-Tags.
Die Formulare, Schaltflächen und Eingabefelder der meisten Websites sind nahezu gleich. Der Grund für die Einführung dieses CSS besteht darin, eine einheitliche Anzeige in verschiedenen Browsern zu ermöglichen. Die Anzeige von Standardschaltflächen, Eingabefeldern usw. in verschiedenen Browsern ist sehr unterschiedlich. Obwohl sie zunächst im formatierten CSS vereinheitlicht wurde, müssen die Ränder der Eingabefelder und die Stile der Schaltflächen in diesem CSS definiert werden. Leider kann die Auswahl nicht vereinheitlicht werden. Wenn Sie die Verwendung von js zur Implementierung in Betracht ziehen, sind die Kosten zu hoch.

f) Druckänderung print.css

Ändern Sie die gedruckte Ausgabeseite.

g) CSS, das anderes CSS enthält

frontpage.css, list.css, detail.css, register.css usw.

Gehen Sie nach verschiedenen Kriterien vor Referenzen Stellen Sie das entsprechende CSS vor. Wenn beispielsweise keine Tabellenänderung auf der Listenseite erfolgt, wird table.css nicht eingeführt. um Code zu speichern.

3. Erstellung des CSS-Framework-Ordners
a) Core Main
speichert Reset.css, Layout.css, Type.css, Print.css

b) Bud-Modul
Speichert table.css, form.css, album.css und andere CSS

c) blütenblattspezifische Anwendung
Speichert gekapseltes CSS. frontpage.css, llist.css, detail.css, register.css und andere CSS. Auf die in diesem Ordner gespeicherten CSS wird direkt verwiesen.

Die Benennung des Ordners erfolgt nach persönlichen Vorlieben! Ich hoffe auch, ihn mit Elektronen, Protonen usw. benennen zu können. hey-hey!

4. Vorteile des CSS-Frameworks
a) Verbesserung der Entwicklungseffizienz.
b) Standardisierte Namensdefinition für einfache Wartung.
c) Standardisieren Sie den Projektentwicklungsprozess
d) Der CSS-Code ist klarer und einfacher. Der HTML-Code ist sinnvoller.

5. Nachteile des CSS-Frameworks.
　a) Die Lernkosten steigen. Sie müssen das gesamte Framework verstehen und die Dokumentation des Frameworks lesen.
b) Das CSS-Framework ist für Seiten wie ein kleines Projekt zu aufgeblasen. Möglicherweise enthält das Framework viel Code, den Sie nicht verwenden.
c) Es trägt möglicherweise nicht zur Verbesserung Ihrer Fähigkeiten bei. Zu abhängig vom Framework, was die Fehlerbehebung erschwert. Einschließlich der dem Framework innewohnenden Fehler.
d) Es ist mühsam, das benötigte Framework und Entwicklungsframework auszuwählen. Nachdem ich es geschrieben hatte, stellte ich fest, dass es immer unflexibler und aufgeblähter wurde. Entschuldigung -_-

　6. Häufige Probleme bei der Entwicklung und Verwendung des CSS-Frameworks.
　1. Es gibt zu viele externe Referenzstile auf der Seite.
Beispielsweise wird die Randdefinition von ul im formatierten CSS als 0 deklariert, und margin: 5px 10px kann im Basisstil-CSS deklariert werden.
Daher werden in Yslow mehrere Definitionen angezeigt.

2. Berücksichtigung der Wiederverwendbarkeit von Komponenten.
Beispielsweise definiert das CSS der Formulardefinition alle Formularänderungen, und es wird davon ausgegangen, dass nur 30 % dieses CSS auf der Registrierungsseite benötigt werden. Sollten wir die unnötigen 70 % herausschneiden?

Aufgrund der beiden oben genannten Probleme denke ich persönlich, dass die Lösung darin besteht, zu kapseln, sodass das, was da sein sollte und was nicht, nicht da ist. Versuchen Sie, die Anzahl der HTTP-Verbindungen und die Größe von CSS zu reduzieren. Wenn dies jedoch vollständig durchgeführt wird, wird die Wiederverwendbarkeit von CSS sehr schlecht und die manuelle Kapselung in der späteren Phase wird sehr mühsam sein. Wir können nur die Worte von Xiao Ma anwenden: „Spezifische Umstände erfordern eine spezifische Analyse.“ Das Leben ist wirklich ein Widerspruch...

3. Sollten wir sie unterstützen
Es ist ersichtlich, dass der größte Zweck darin besteht, den Browser entsprechend frei skalieren zu können Die Auflösung des Benutzers ist sehr nützlich für Benutzer sehr großer Monitore und Benutzer kleiner Monitore. Nach dem Sammeln der Browserdaten unserer Benutzer stellten wir jedoch fest, dass es nur sehr wenige Benutzer gibt, die sich an diesen beiden Enden befinden. Es ist offensichtlich nicht kosteneffektiv, mehr als das Doppelte der normalen Entwicklungszeit für diese Benutzer aufzuwenden. Als wir TBSP entwickelten, beschloss unser Team, es nicht zu unterstützen. Dies ist natürlich ein Vorschlag, und wir hoffen, sie auch nutzen zu können, um den Benutzern das beste Erlebnis zu bieten.

Die oben genannten sechs Punkte sind die Gedanken und Zusammenfassungen der täglichen Entwicklung meines und des gesamten Taobao UED-Teams. Hinterlassen Sie uns eine Nachricht und lassen Sie uns gemeinsam darüber diskutieren.

Das Obige ist der Inhalt des CSS-Tutorials zum CSS-Framework-Webdesign. Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (www.php.cn)!