Anwendung schöner Stylesheets bei der Erstellung von XHTML+CSS-Webseiten

Dies ist ein Artikel, der vor langer Zeit geschrieben wurde. Jetzt scheint es, dass die darin enthaltenen Ideen es wert sind, gelernt zu werden. Während Sie die Fälle auf jb51.net studieren, können Sie sich auch einige theoretische Kenntnisse aneignen, die Ihnen für Ihren Wissensdurchbruch sehr hilfreich sein werden. Kommt alle!

Seit ich Herrn Zeldmans Meisterwerk „Designing with Web Standards“ gelesen habe, dessen chinesische Version „Website Refactoring“ (2. Auflage) lautet, war ich tief beeindruckt und meine Idee, Webstandards zur Entwicklung und Implementierung unserer Projekte zu verwenden, wurde bestärkt. Aber nur zu wissen, was Webstandards sind und wie man sie in konkreten Projekten anwendet, reicht bei weitem nicht aus. Sie müssen alle Komponenten der Webstandards einzeln erlernen und anwenden und sie einzeln aufschlüsseln. Nur dann können Sie ihr Wesentliches entdecken! Wenn Webentwickler und -designer wie ich dieses Prinzip verstehen und zielgerichtet lernen und üben, werden wir meiner Meinung nach mehr erreichen und einen Beitrag zur Anwendung von Webstandards in China leisten! (Haha, das klingt vielleicht etwas angeberisch, aber es ist tatsächlich das Ideal der meisten von uns Software-Experten.)

Jetzt ist das Zeitalter von Web 2.0 und sogar 3.0, das Zeitalter von XHTML, XML, CSS, ECMAScript und DOM. Obwohl es sich dabei nicht um die endgültige Technologie handelt, bilden sie zusammen eine Lösung – die Grundlage für unseren Plan, eine abwärtskompatible Website zu erstellen, und die erforderliche technische Grundlage für die Erstellung einer Website, die den Webstandards entspricht. Wir hoffen nicht nur auf mehr Benutzerunterstützung und -besuche, sondern auch auf den Aufbau langlebiger, schöner Websites, die ihre Aufmerksamkeit langfristig auf sich ziehen. Ich bin davon überzeugt, dass das Erlernen der Verwendung von CSS zur Verbesserung unserer Website eine gute Möglichkeit ist, ihre Aufmerksamkeit zu erregen und dass es auch ein modischer Entwicklungstrend im Web 2.0-Zeitalter ist. Im Folgenden werde ich ausschließlich von meinen Erfahrungen mit der CSS-Technologie berichten.

Wenn Sie ein CSS-Experte werden möchten, reicht es bei weitem nicht aus, lediglich den Umgang mit CSS-Selektoren zu beherrschen. Es kommt auch auf die Gesamtplanung der Arbeit, die Beherrschung des Arbeitsablaufs und die Verbesserung der Wartbarkeit und Effizienz des Stylesheets an. Mit CSS können wir die wundervollen Websites erstellen, die wir uns wünschen, und das Schreiben von CSS selbst ist ein Vergnügen. Wie können wir also attraktivere Stylesheets erstellen? Welche Eigenschaften sollte Ihr Stylesheet haben? Durch Studium und Kombination meiner eigenen Arbeitserfahrung habe ich eine gute Methode zum Erstellen exquisiter Stylesheets zusammengefasst.

1. Überladen Sie Ihr CSS nicht mit Markup

Das Verknüpfen oder Importieren eines Stylesheets kann wie eine gewaltige Aufgabe klingen. Ich habe viele Website-Entwickler gesehen, die saubere und gut organisierte CSS-Dokumente haben, aber langsam werden die zuvor erstellten, exquisiten Stylesheets zu Müll, weil sie diese möglicherweise nicht kurzfristig aktualisieren können oder zu faul sind, sie zu verwalten. Wenn wir an einer großen Website arbeiten, auf der Hunderte von Inhalten veröffentlicht werden müssen. Da die Zeit begrenzt ist, müssen Sie CSS verschachteln oder anordnen, um schnelle Änderungen oder Aktualisierungen vorzunehmen. Mit der Zeit bleibt diese Gewohnheit bestehen, bis Ihnen eines Tages mitgeteilt wird, dass die Site vollständig neu gestaltet wird (der Inhalt bleibt jedoch derselbe) und Sie nur eine Woche Zeit haben, um ihn zu erstellen (einschließlich Tests). Im Allgemeinen ist die Aktualisierung eines Stylesheets eine ziemlich einfache Vorgehensweise, es sei denn, Sie nehmen über einen längeren Zeitraum hinweg Änderungen an verstreuten Bereichen Ihrer Site vor und verfügen nicht über einen Gesamtüberblick über die Stylesheet-Struktur der Site.

Das Verknüpfen oder Importieren Ihres Stylesheets ist keine zufällige Angelegenheit. Erstellen Sie ein sauberes Stylesheet und halten Sie sich daran. Dann sind Sie bei der Arbeit zufriedener. Hinweis: Wenn Sie bei jeder Aktualisierung oder jedem Hinzufügen neuer Inhalte versuchen, ein neues Stylesheet zu erstellen, werden Sie sich auf jeden Fall Ärger einhandeln. Zu viele verknüpfte und importierte Stylesheets können die Beseitigung von Fehlern erschweren und die Wartung der Stylesheets schwierig machen. Es ist verständlich, dass größere Websites für verschiedene Teile separate Stylesheets erstellen. Passen Sie nur auf, dass Sie nicht ins Extreme gehen. Das Hinzufügen einer großen Anzahl von Stylesheets führt zu einer Erhöhung der Anzahl von HTTP-Anfragen und kann sich auf nachfolgende Arbeiten auswirken.

2. Semantische Definitionen sind klar und leicht verständlich

Sie müssen nicht nur das am besten geeignete und aussagekräftigste Element zum Ausdrücken des Inhalts auswählen, sondern auch darauf achten, die Attributwerte für die Klasse und ID auszuwählen. Klare Definitionen erleichtern die Wartung und sind für jeden im Team verständlich. Schauen Sie sich diese Definition an:

.l10k { color: #369; } , .left-blue { color: #369; } , wenn ich es gemacht hätte, wüsste ich vielleicht, was es bedeutet, aber andere würden es vielleicht nicht verstehen. Auch wenn wir seine Bedeutung heute kennen, können wir garantieren, dass wir seine Bedeutung auch viele Jahre später noch kennen werden? Am besten fügen Sie den Klassenattributen weder Farbe noch Längen- und Breitenmaße hinzu. Eine passendere Namenskonvention ist: .work-description { color: #369; }

3. Wissen, wann bedingte Kommentare hinzugefügt werden müssen und Techniken anwenden

Es wurden viele Artikel über Techniken zur Fehlerbehebung geschrieben und bedingte Kommentare sind eine gute Möglichkeit, IE-Versionen zu steuern. Ich stimme zu, dass bedingte Kommentare viel besser sind, als sie überall in Ihr CSS zu schreiben, aber mir ist vor Kurzem klar geworden, dass es viele Hinweise darauf gibt, dass dies nicht die beste Lösung ist. Sie möchten für ein Element eine Mindesthöhe festlegen, IE6 erzwingt dies jedoch nicht. Sie wissen also, dass jede von Ihnen verwendete Höhe auf die gleiche Weise behandelt wird. Erstellen Sie ein Stylesheet neu und fügen Sie Ihrer Auszeichnung bedingte Kommentare hinzu, sodass Sie nur noch diese Regel befolgen müssen? Wäre es nicht besser, die Mindesthöhen- und Höhenregeln zusammenzuhalten, einen Trick auszuwählen und sie im selben CSS-Dokument zu behalten? In diesem Fall glaube ich, dass es schwierig wäre, diesen Ansatz zu verwenden.

4. Wenden Sie CSS auf Webseiten an und versuchen Sie, externe Stylesheets zu verwenden

Gibt es irgendwelche Vorteile? Dies ist allen völlig klar und eines lässt sich natürlich nicht leugnen: Es kann die Code-Wiederverwendung maximieren und die Konfiguration von Website-Dateien optimieren.
Nun, das Obige sind einige meiner persönlichen Meinungen. Ich hoffe, dass meine Freunde mir weitere Vorschläge machen können. Ihre Vorschläge sind meine Motivation, mich Schwierigkeiten zu stellen! Danke!

<<: Vue-Kapselungskomponente Bildkomponente hochladen

>>: MySQL 5.7-Clusterkonfigurationsschritte

Tutorial zur Installation von MySQL8 auf Centos7

Anwendung schöner Stylesheets bei der Erstellung von XHTML+CSS-Webseiten

Tutorial zur Installation von MySQL8 auf Centos7

Analyse des Benchmarking-Prozesses von Sysbench für MySQL

Verwendung des Linux Dig-Befehls

Drei Beispiele für Node.js-Methoden zum Abrufen von Formulardaten

Linux-Sudo-Sicherheitslücke kann zu unberechtigtem privilegiertem Zugriff führen

Detaillierte Erläuterung der Verwendung des Linux-Befehls seq

So erstellen Sie Ihre erste React-Seite

Soll die Like-Funktion MySQL oder Redis verwenden?

JavaScript Canvas implementiert die Bewegung des Balls entlang der Maus

MySQL-Lernzusammenfassung: Ein vorläufiges Verständnis des Architekturdesigns der InnoDB-Speicher-Engine

Artikel empfehlen

JS Canvas realisiert die Funktionen von Zeichenbrett und Signaturtafel

JavaScript realisiert die Generierung und Überprüfung von Zufallscodes

Umgang mit Leerzeichen in CSS

Globale Aufrufimplementierung von Vue2.x Picker auf mobilen Endgeräten

So konfigurieren Sie einen Pfadalias für das React-Scaffolding

So verwenden Sie den Linux-Befehl „more“ in allgemeinen Linux-Befehlen

Schritte zum Initialisieren des Passworts nach der ersten erfolgreichen Installation von MySQL

React realisiert sekundäre Verknüpfung (linke und rechte Verknüpfung)

Lokale Vue-Komponentendatenfreigabe Vue.observable()-Nutzung

Docker-Netzwerkmodus und Konfigurationsmethode

Allgemeine Benennungsregeln für CSS-Klassen und IDs

Beispielcode zur Realisierung eines Buchseitenumblättereffekts mit CSS3

Lösung für das Problem des achtstündigen Unterschieds bei der MySQL-Einfügezeit

Detaillierte Erklärung zur Verwendung struktureller Pseudoklassenselektoren und Pseudoelementselektoren in CSS3

Vue implementiert die Bildfrequenzwiedergabe des Karussells