Zusammenfassung der hohen Leistung beim Schreiben von Code mit CSS

In diesem Artikel geht es hauptsächlich um die Leistungsoptimierung beim Schreiben von CSS und eine Zusammenfassung wartungsintensiver Optimierungsvorschläge, einschließlich beliebter Diskussionspunkte wie Sprite-Bilder und Größeneinstellungen.

Leistung ist heutzutage sehr beliebt und es ist auch eine Phase, „wie man es gut macht“, die jeder Entwickler durchlaufen muss, nachdem er „wissen“ und „in der Lage ist, es zu tun“. Bei der Leistung geht es um die Benutzererfahrung auf verschiedenen Geräten und unter verschiedenen Netzwerkbedingungen. Es wird auch von vielen Faktoren beeinflusst. In diesem Artikel geht es darum, wie man in CSS eine hohe Leistung erzielt.

Hochleistungs-CSS

Die Leistungsprobleme von HTML und CSS selbst sind nicht herausragend, wenn der Code ausgeführt werden kann Die schnellere Parsing-Geschwindigkeit ist das Tüpfelchen auf dem i.

1. Verwenden Sie effiziente CSS-Selektoren

Einfach ausgedrückt ist ein CSS-Selektor, der vom Browser schnell analysiert und abgeglichen werden kann, ein effizienter Selektor.

Zuerst müssen Sie wissen, wie der Browser CSS analysiert

Zum Beispiel:

.nav ul.list li p{}

Unsere gemeinsame Denkweise ist, die Navigationsklasse zu finden Suchen Sie zuerst nach dem in der Klasse enthaltenen ul und finden Sie dann alle ps in allen li, die Nachkommen der Klassenliste in ul sind. Aber ist das so? Was? Was? ~

Die Wahrheit ist das Gegenteil! Was bedeutet es? Das heißt, es beginnt nicht mit dem ersten und schränkt den Umfang langsam ein, sondern beginnt mit dem „Streifen“-Feld p, was dem Durchlaufen entspricht, und findet dann li usw. Nun, das sollten Sie wissen ohne dass ich den Konsum unter ihnen beschreibe. Es ist wichtig, dieses Prinzip zu verstehen. Effiziente Selektoren bedeuten einen schnelleren Abgleich und weniger Suchvorgänge. Wenn wir den Selektor definieren, sollten wir daher die Anzahl der ersten Übereinstimmungen und die Gesamtanzahl der übereinstimmenden Suchvorgänge minimieren.

Die obigen Erklärungen folgen genau diesen Prinzipien

(1) Vermeiden Sie die Verwendung von Platzhaltern

(2) Vermeiden Sie die Verwendung von Tag-Selektoren und Einzelattribut-Selektoren als Schlüsselselektoren

(3) Fügen Sie keine Tag-Namen vor dem ID-Selektor hinzu

(4) Versuchen Sie, nicht zu viele Ebenen im Selektor zu definieren, da dies auch die Komplexität der CSS- und DOM-Strukturen verringert Der Grad der Kopplung verbessert die Wartbarkeit des Stils

(ps: Mal ehrlich, haben Sie eines der oben genannten „Tabus“ begangen?~)

Um das oben Gesagte zusammenzufassen: Es gibt zwei Der erste Punkt wurde am Anfang erwähnt. Die Leistungsprobleme von CSS stehen nicht im Vordergrund, daher steht die Wartbarkeit an erster Stelle. Der zweite Punkt ist, dass der ID-Selektor den Vorteil hat, dass er einzigartig ist. Eine Seite kann jedoch nur eine eindeutige ID definieren. Die Definition zu vieler IDs verringert die Wiederverwendbarkeit und erschwert die Wartung. Daher wird die Verwendung mehrerer IDs nicht empfohlen.

2. CSS-bezogene Bildverarbeitung

Auf den heutigen Webseiten kennt jeder den Anteil von Bildern und ihre Bedeutung. Wie geht man also gut mit Bildern um und legt Stile für Bilder fest, damit Benutzer beim Öffnen der Webseite ein besseres Erlebnis haben? Hier einige Meinungen:

(1) Stellen Sie die Größe des Bildes nicht ein

Meiner persönlichen Erfahrung nach gab es solche Situationen, in denen ich mich an den Designentwurf gehalten habe Nachdem er die Seite fertiggestellt und zum Testen an das Backend übergeben hatte, rannte er plötzlich zu mir und sagte: „Hallo, schau mal, hier stimmt etwas nicht.“ Als ich es sah, war es schlecht, das Bild war fehl am Platz, und dann Mir ist eingefallen, dass ich die Breite und Höhe des Bildes nicht definiert habe (Sie müssen es nicht direkt aus dem Designentwurf ausschneiden) und dass Sie dann einen Fehler gemacht haben, als Sie die Breite und Höhe im CSS-Stil definiert haben. Deshalb habe ich dies später als etwas betrachtet, auf das ich beim nächsten Erstellen einer Seite achten sollte. Als ich diese Meinung sah, wusste ich etwas Besseres.

Sehen wir uns die Erklärung an. Erstens werden Designer einige Bilder erstellen, die die erforderliche Größe überschreiten, um das Bild schön zu machen. Zweitens kann dasselbe Bild mehrmals an verschiedenen Stellen auf der Seite verwendet werden als Miniaturansichten, normales Bild, großes Bild. Hier entsteht das Problem. Wenn die Originalgröße des Bildes vom tatsächlichen Bedarf abweicht, kommt es zu Leistungsproblemen bei der Verwendung. Außerdem beansprucht der Netzwerkübertragungsprozess mehr Bandbreite und erhöht die Downloadzeit. Daher besteht die beste Vorgehensweise darin, einen separaten Satz Bilder für die erforderlichen Teile zu erstellen, damit diese beim ersten Laden der Seite schneller angezeigt werden können.

(2) Verwenden Sie CSS „Sprite Picture“

, um verstreute Bilder zu einem großen Bild zusammenzuführen und CSS für die Hintergrundpositionierung zu verwenden. Der Vorteil besteht darin, die Anzahl der Anfragen zu reduzieren und die Gesamtladegeschwindigkeit von Bildern zu verbessern.

Aber es hat auch einige Mängel:

Zum Beispiel erfordert das Zusammenfügen mehrerer Bilder zu einem großen Bild eine genaue Berechnung und eine sorgfältige Positionsanpassung. Die reine Handarbeit ist eine sehr komplizierte Angelegenheit. (Glücklicherweise gibt es jetzt einige Tools, die uns dabei helfen können)

Darüber hinaus ist der Wartungsprozess kompliziert. Versuchen Sie, die vorhandenen Bilder an ihren ursprünglichen Positionen zu belassen. Der ursprüngliche Bereich kann nicht platziert werden. Wenn Sie ihn an der ursprünglichen Position ändern müssen, müssen Sie die verbleibenden Bildstile ändern, was ein sehr umständlicher Vorgang ist. Neu hinzugefügte Bilder platzieren Sie am besten am Ende.

Außerdem kann eine unsachgemäße Verwendung zu Leistungsproblemen führen. Das größte Problem ist der Speicherverbrauch. Wenn Sie während des Produktionsprozesses keine Planung vornehmen und die Bilder zufällig platzieren, können die Bilder recht groß werden und viel Speicher belegen.

Im Folgenden sind einige Best Practices aufgeführt:

1. Wenden Sie die CSS-Sprite-Technologie später im Projekt an

Da Bilder im Allgemeinen während des Entwicklungsprozesses häufig geändert oder ersetzt werden, erhöht sich die Entwicklungskosten erheblich, wenn zu diesem Zeitpunkt Sprite-Technologie verwendet wird.

2. Ordnen Sie die „Sprite“-Bilder richtig an

Wenn Sie alle Bilder auf einem Bild zusammenfassen möchten, stimmt etwas nicht, aber das stimmt nicht pflegeleicht. Sehr praktisch. Organisationshintergrundbilder werden hauptsächlich nach Modulen und Hintergrundbildstilen unterteilt. Beispielsweise werden Miniaturansichten für die Anzeige zusammen platziert und Symbole wie Kommentare, „Gefällt mir“-Angaben, Auf- und Ab-Pfeile werden zusammen platziert usw.

3. Kontrollieren Sie die Größe und Größe des „Sprite“-Bildes

Da große Bilder viel Speicher beanspruchen, müssen sie auf ein Minimum reduziert werden Angemessene Größe. Empfohlene Länge und Breite. Die Multiplikation überschreitet nicht 2500 und die Größe liegt innerhalb von 200 KB.

4 Kontrollieren Sie angemessen den Abstand zwischen den Hintergrundbildeinheiten und die Position des Hintergrundbilds

Dieses Prinzip soll verhindern, dass das Hintergrundbild verwendet wird. Wenn die Größe kleiner als die Elementgröße ist, erscheinen andere irrelevante Hintergrundbilder im Bereich

5. Verwenden Sie zur Verarbeitung relevante Werkzeuge Sprites

3. Reduzieren Sie die Menge an CSS-Code

Ein wichtiges Mittel zur Verbesserung der Gesamtladegeschwindigkeit der Website ist die Erhöhung der Netzwerkübertragungsgeschwindigkeit von Codedateien. Neben der Codekomprimierung ist auch die Optimierung des Codes ein Mittel.

(1) Definieren Sie prägnante CSS-Regeln

Fügen Sie verwandte Regeln zusammen und definieren Sie prägnante Attributwerte

Zusammenführungsregeln beziehen sich auf Dinge wie Schriftfamilie , Schriftgröße, Schriftstärke usw. können zu einer Schriftart kombiniert werden. Präzise Attributwerte wie Farbwert: Farbe, #33AAFF können zu #3AF usw. vereinfacht werden.

(2) Zusammenführen derselben Definitionen

Es gibt immer einige Module auf der Webseite, die eine hohe Ähnlichkeit aufweisen, sodass dieselben Teile eine Definition und unterschiedliche Teile teilen können Definieren Sie es separat. Und in CSS können viele Eigenschaften vererbt werden, sodass Sie sie nur einmal an der entsprechenden Stelle definieren müssen.

(3) Ungültige Definitionen löschen

Ungültige Definitionen wirken sich nicht auf die Anzeige von Seitenfunktionen aus, beeinträchtigen jedoch die Leistung der Seitenanzeige und erhöhen die Codemenge. erhöht auch die Zeit, die der Browser zum Parsen des Codes benötigt. Zu den ungültigen Definitionen gehören ungültige Regeln und ungültige Stilattribute, die im Allgemeinen während des Entwicklungsprozesses eingeführt werden und nicht intuitiv beurteilt werden können. In diesem Fall können Sie Tools wie die eigenen Tools von Chrome verwenden, um ungültige Stile in CSS zu finden. .

Andere CSS-Hochleistungspraktiken

(1) Vermeiden Sie die Verwendung von @import

Die von @ importierten neuen Stildateien import will verhindert parallele Downloads von Seiten, was die Gesamtladezeit der Datei erhöht.

(2) Vermeiden Sie die Verwendung einzigartiger Stile des IE-Browsers: Bildfilter und CSS-Ausdrücke

Die Verwendung von Bildfiltern blockiert den Browser, wenn das Bild geladen wird und Rendering und verursacht zusätzlichen Speicheraufwand. Die Funktion von CSS-Ausdrücken besteht darin, CSS-Eigenschaften dynamisch festzulegen. Es gibt nicht nur Kompatibilitätsprobleme, sondern auch Leistungsprobleme. Wenn sich beispielsweise die Browsergröße oder das Fenster ändert, führt der Browser häufige Berechnungen durch und verbraucht viel Leistung. Der gleiche Effekt kann mit Javascript erzielt werden.

Best Practices für CSS3

Browserunterstützung prüfen

Während der Verwendung von CSS3 erhalten wir die meisten Fragen. Eine Frage könnte sein: Wie ist die Kompatibilität? Mit der Entwicklung von CSS kann es auf keinen Fall eine bessere Lösung für viele schwer zu lösende Probleme bieten, auf die wir zuvor gestoßen sind, weshalb wir uns fragen, ob wir das schaffen können. Auf der PC-Seite gibt es die viel kritisierte IE-Serie, die auf der mobilen Seite deutlich besser sein wird, teilweise aber immer noch nicht sehr gut ist. Daher ist die Überprüfung der Browserunterstützung fast zu einem Muss geworden. Wenn die verwendeten Funktionen nur dekorativer Natur sind und keinen Einfluss auf die Gesamtsituation haben, müssen Sie nicht zu viele Kompatibilitätsprobleme berücksichtigen. Wenn dies auf Designanforderungen zurückzuführen ist und alle Browser unterstützt werden müssen, müssen Sie besonders darauf achten. Entwickler können Online-Tools wie caniuse.com, CSS3 Click Chart, CSS-Inhalte und Browserkompatibilität auswählen, um die Kompatibilität zu überprüfen.

Fügen Sie das erforderliche Browser-Präfix hinzu

Für Freunde, die gerade erst angefangen haben, CSS zu verwenden, wenn Sie gelegentlich etwas wie: „-webkit-“ im Quellcode eines sehen Website, -moz-“ Warten Sie, Sie finden es vielleicht seltsam, was ist das? Sie entsprechen den von verschiedenen Browserherstellern hinzugefügten Präfixen.

Da der Browser möglicherweise nur eine frühe Version der Standarddefinition implementiert, wenn er CSS3 unterstützt, ist das Hinzufügen von Browser-Präfixen zum Code ebenfalls ein hilfloser Schachzug, der dazu führt, dass Code schwieriger zu warten.

Aber es ist nicht notwendig, mit allen Browsern kompatibel zu sein, um „perfekt“ zu sein. Im Allgemeinen können Sie anhand des Marktanteils der Browser- oder Systemversion und des Anteils entscheiden, ob Sie es hinzufügen möchten oder nicht der Zielbenutzer, die den Browser verwenden und mehrere Präfixe hinzufügen. Und ich glaube, dass mit der schrittweisen Entwicklung und den kontinuierlichen Upgrades und Updates von Systemen und Browsern die Notwendigkeit, Präfixe zu verwenden, abnehmen wird.

Das Problem tritt erneut auf. Da es notwendig ist, die erforderlichen Präfixe hinzuzufügen, bedeutet das, dass es manchmal immer noch notwendig ist. Wenn es hinzugefügt werden muss, wäre das nicht ziemlich mühsam? Dieselbe Regel muss drei- oder viermal geschrieben werden und kann an vielen Stellen verwendet werden. Was sollen wir tun? Keine Sorge, hier sind ein paar Gegenmaßnahmen:

1. Verwenden Sie Tools, um Browser-Präfixe für CSS-Attribute hinzuzufügen

Präfixr, das den Code in späteren Entwicklungsstadien verarbeiten kann. Erforderliche Präfixe werden automatisch hinzugefügt und unnötige Präfixe gelöscht.

Autoprefixer: Wenn Sie mehr Autonomie im Entwicklungsprozess wünschen, können Entwickler den Browser-Unterstützungsbereich anpassen und in mehrere Entwicklungsumgebungen integrieren. Es stehen auch mehrere Tools zur Verfügung: cssFx, *css Agent* und -prefix-free.

2. Verwenden Sie die CSS-Vorverarbeitungstechnologie

Zu den derzeit beliebten Methoden gehören Sass und weniger. Die spezifische Methode besteht darin, einen Vorlagenstil basierend auf den CSS3-Stileigenschaften zu definieren. Der Vorteil besteht darin, dass viele Codeduplizierungen vermieden werden und nur eine Definition gepflegt werden muss.

3. Fügen Sie nicht zu viele Browser-Präfixe hinzu

Um mit allen Browsern kompatibel zu sein, fügen einige Entwickler die Präfixe aller Browser zum CSS-Code hinzu Egal was passiert, dies ist eine negative Codierungsmethode, die zu viel wiederholten Code hinzufügt, die Analyseleistung des Browsers verringert und die Komplexität erhöht. Gleichzeitig werden einige vorangestellte Attribute möglicherweise nicht vom Browser unterstützt.

4. CSS3-Standardattributdefinitionen hinzufügen

Was sind Standardattributdefinitionen? Es ist kein Browser-Präfix erforderlich. Möglicherweise haben Sie bemerkt, dass viele Orte, die CSS3 verwenden, am Ende Standardattributdefinitionen schreiben. Denn wenn der Browser Standardattribute unterstützt, kann er die Definition mit dem zuvor hinzugefügten Präfix überschreiben. Die Standarddefinition von Attributen in CSS3 ist die Definition, die der Spezifikation entspricht. Die Definition mit dem hinzugefügten Browserpräfix wird nach und nach entfernt aktualisiert.

Natürlich ist auch zu beachten, dass einige Attribute derzeit nur zu Webkit oder nur zu Firefox gehören, sodass keine Standarddefinitionen und andere Browser-Präfixe geschrieben werden müssen.

Machen Sie gute Arbeit bei der Kompatibilität mit den neuen Funktionen in CSS3

Wenn es um Kompatibilität geht, werden niedrigere Versionen von IE erwähnt, wie z. B. sehr häufige abgerundete Ecken , transparente Bilder usw. Manchmal stufen wir sie herunter, z. B. mithilfe von Box-Sizing und Transform. Es wird empfohlen, Modernizr zu verwenden. Dieses Framework enthält viele Kompatibilitätslösungen für neue CSS3-Funktionen.

Egal welche Lösung verwendet wird, sie führt zu Leistungseinbußen und kann nicht ohne Regeln missbraucht werden. Jeder muss noch abwägen und entscheiden. Empfehlen Sie eine Website mit Vorschlägen zur effizienteren Nutzung von HTML5: html5please. Die Website unterteilt die neuen Funktionen in CSS3 je nach Verwendungszweck in drei Kategorien:

(1) Die direkte Verwendung von

enthält die meisten neuen Funktionen und Einige Funktionen selbst wirken sich nicht auf die Kompatibilität aus, z. B. Randradius, Medienabfragen usw. Bei einigen muss eine Downgrade-Verarbeitung hinzugefügt werden, z. B. bei mehreren Hintergrundbildern. Alternativ müssen Sie ein einzelnes Hintergrundbild oder eine einzelne Hintergrundfarbe festlegen.

(2) Mit Vorsicht verwenden

Dieser Teil ist hauptsächlich ein Leistungsproblem, z. B. der Boxschatten, der auf Elemente angewendet wird, die einen großen Bereich einnehmen, wenn die Seite gescrollt wird oder Die Maus schwebt. Dies führt zu erheblichen Leistungsproblemen.

(3) Vermeiden Sie die Verwendung von

, da diese möglicherweise nur einen bestimmten Browser, z. B. Reflection, unterstützen. Daher müssen Sie die Verwendung vermeiden.

Zusammenfassend lässt sich sagen, dass es viele Möglichkeiten gibt, wie CSS die Leistung verbessern kann, aber wir können sie leicht ignorieren, da ihre Auswirkungen nicht so offensichtlich erscheinen und es für viele Menschen praktisch ist, ihre Talente frei zu nutzen und zu schreiben Was auch immer Sie wollen, solange es den Effekt erzielen kann. Das ist auch ein bisschen negativ. Haben Sie Ihr Ziel, ein exzellenter Ingenieur zu sein, vergessen? ! ~~Obwohl CSS-Regeln nicht schwierig sind, ist es nicht einfach, sie gut zu schreiben. Sie müssen dennoch ein gewisses Streben nach Perfektion haben. Bitte schreiben Sie und schätzen Sie es! ~

CSS mit hohem Wartungsaufwand

Was sind die Merkmale von CSS?

Einfach ausgedrückt: Verwendungsmethoden: Inline, eingebettet, extern, Import. So gestalten Sie Elemente: Element-Tag-Name, Klassenname, ID, verschiedene Selektoren und Kombinationen davon. Daher ist es sehr flexibel, wenn es keine Standardeinschränkungen gibt, was definitiv zu Verwirrung und Schwierigkeiten bei der Pflege des CSS-Codes führt.

Wie organisiert man CSS-Code effizient?

Eine klare Struktur und eindeutige Module können die Wiederverwendbarkeit und Wartbarkeit des Codes verbessern und die Entwicklungskomplexität verringern. Wie organisiert man es also?

Die erste besteht darin, die Codedateien zu organisieren, die in zwei Hauptkategorien unterteilt werden können: allgemeine Kategorien und Geschäftskategorien. Dann gibt es eine Datei zum Zurücksetzen. Allgemeine Namen sind „Zurücksetzen“, „Standard“, „Normalisieren“ usw.

Es gibt eine Datei zum Speichern allgemeiner Module und einiger grundlegender Stile, die oft als Mod, Common usw. bezeichnet werden, z. B. Seitendialogfelder, Eingabeaufforderungsfelder, Kopfzeilen, Unterseiten, Seitenleisten usw., die verwendet werden Wird auf mehreren Seiten angezeigt. Wird verwendet, um auf diese Weise auf jede Seite zu verweisen und so die Wiederverwendung von Code zu verbessern.

Darüber hinaus ist eine Datei erforderlich, um Stile zu speichern, die mit dem alten IE-Browser kompatibel sind. Dies hat zwei Vorteile:

1. Reduziert den Aufwand beim Laden von Stildateien für Nicht-IE-Browser

2. Wenn Sie sich entscheiden, die alte Version von IE in Zukunft nicht mehr zu unterstützen, müssen Sie nur eine Datei ändern und müssen nicht nach mehreren zu ändernden Dateien suchen. Ein Grundsatz bei der Behandlung von Browserkompatibilitätsproblemen ist natürlich, ob es andere Lösungen gibt, bei denen keine Kompatibilitätsprobleme auftreten. Wenn nicht, legen Sie die Teile, die kompatibel sein müssen, in einer separaten Datei ab.

Die restlichen CSS-Stildateien werden für Geschäftsmodule verwendet. Die Stildateien der verschiedenen Module sollten grundsätzlich nicht zu groß sein.

Dies kann ein Problem verursachen. Muss eine Seite nicht viele Dateien importieren? Gibt es beim Laden der Seite nicht viel mehr HTTP-Anfragen? Tatsächlich besteht kein Widerspruch darin, die Entwicklung und Wartung zu erleichtern. Beim Veröffentlichen werden Tools zum Komprimieren und Zusammenführen mehrerer Dateien zu einer Datei verwendet, sodass Sie sich keine Gedanken über die Einführung mehrerer Dateien machen müssen.

Oben geht es um die Organisation von Dateien, daher müssen Stilanweisungen auch in Dateien nach bestimmten Regeln organisiert werden. Wenn sich die Elemente im Modul beispielsweise auf derselben Ebene befinden, erfolgt dies entsprechend der Position des Elements auf der Seite, von oben nach unten oder von links nach rechts, wenn mehrere Elemente vorhanden sind Wenn Sie dieselbe Deklaration verwenden, sollte zuerst der gemeinsame Stil deklariert werden. Wenn Sie der Meinung sind, dass dies nicht ausreicht, können Sie einige fortgeschrittenere Methoden wie less und sass verwenden, die CSS dynamische Sprachfunktionen wie Variablen, Vererbung, Operationen, Funktionen usw. verleihen.

Das Obige wird aus mehreren allgemeinen Richtungen besprochen. Lassen Sie uns im Folgenden über bestimmte Punkte sprechen

Verwenden Sie CSS-Reset, um den Browser-Anzeigeeffekt zu vereinheitlichen

Erstens Alle HTML-Tags haben Originalstile, aber das Problem besteht darin, dass die Standardstile der Tags in verschiedenen Browsern unterschiedlich sind. Einige dieser Unterschiede haben bereits 2004 zu Problemen bei der Entwicklung geführt. Anschließend gab es verschiedene Reset-Pläne, von denen einer „eine Weile heiß“ war. Dieser Plan hat insgesamt eine Codezeile *{margin: 0;} . Die standardmäßigen Rand- und Füllstile aller Beschriftungen wurden zurückgesetzt. Ein Nachteil besteht jedoch darin, dass dies die Komplexität der nachfolgenden Entwicklung erhöht und die Gesamtentwicklungseffizienz nicht effektiv verbessern kann. Darüber hinaus ist die Leistung dieser Lösung ebenfalls schlecht, was sich auf die Leistung des Seitenrenderings auswirkt, wenn viele Seitenelemente vorhanden sind. Daher erforschen die Leute nach und nach bessere Reset-Methoden. Derzeit gibt es viele beliebte Reset-Lösungen, darunter Reset CSS, das von Eric Meyer entwickelt wurde, und YUI Reset CSS, das vom Front-End-Technologieteam von Yahoo entwickelt wurde. Tatsächlich gibt es keine Lösung, die für alle Projekte geeignet ist. Daher ist es am besten, auf die Lösungen anderer zu verweisen und dann eine Lösung zu entwerfen, die zu Ihrem eigenen Projekt passt.

Die folgenden Punkte müssen berücksichtigt werden:

(1) Neue HTML5-Tags müssen ihren Anzeigestil zurücksetzen, da ihr Standardanzeigestil in früheren Versionen von IE nicht definiert ist.

(2) Die Unterschiede zwischen Padding-, Rand- und Rahmen-Tags in Browsern werden hauptsächlich durch die Standardstile dieser drei Stile verursacht, es ist jedoch nicht erforderlich, den Rand, den Abstand und den Rand aller Elemente zurückzusetzen . Es sollte sich an der tatsächlichen Situation orientieren.

(3) Die Schriftarteinstellungen 4a249f0d628e2318394fd9b75b4636b1~4e9ee319e0fa4abc21ff286eeb145ecc, 8e99a69fbe029cd4e2b854e244eab143, 907fae80ddef53131f3292ee4f81644b und andere semantische Tags verfügen über Standardschriftarten, aber die tatsächlich erforderliche Schriftgröße oder -stärke ist unterschiedlich von der Standardeinstellung abweichen, sodass sie in allgemeinen Projekten zurückgesetzt werden.

(4) Stil-Reset anderer Elemente sind der Standard-Listenelementstil von li, der Standardabstand zwischen Zellen einer Tabelle, die Unterstreichung eines Links usw.

Sortierung für CSS definieren

CSS ist nicht sehr logisch und das Sortieren ohne die Hilfe von Tools wird sehr umständlich sein , wird es nur wenige Leute interessieren, aber das Sortieren bietet dennoch Vorteile.

Zum Beispiel:

1. Verhindern Sie doppelte Definitionen

3. Möglichkeit, Definitionen klar anzuzeigen

4. Folgewartung kann schnell gefunden werden

Sortiermethode:

1 Nach Typ, wie Anzeige und Floating, Positionierung, Größe, Schriftart usw.

2. Sortieren Sie nach Buchstaben in alphabetischer Reihenfolge. Der Vorteil besteht darin, dass die Regeln einfach sind

3. Ordnen Sie nach der definierten Länge und der durch den Stil definierten Zeichenlänge an

Jedes hat seine eigenen Vor- und Nachteile . In praktischen Anwendungen wird empfohlen, die erste zu verwenden. Für Front-End-Ingenieure ist es jedoch schwierig, dies während des Schreibvorgangs selbst zu tun. Sie können während des Schreibvorgangs auf die effizienteste Weise schreiben und beim Senden des Codes Tools zum Sortieren des CSS verwenden. Dies verbessert nicht nur die Effizienz, sondern erleichtert auch das anschließende Lesen und Warten des Codes. Ein kostenloses Tool ist CSScomb.

Nutzen Sie das Gewicht von CSS sinnvoll, um die Wiederverwendbarkeit des Codes zu verbessern.

Was ist Gewicht, das heißt, die Priorität vieler Typselektoren in CSS wird überschrieben? die Priorität. Low-Level-Stil. Für genauere Gewichtsregeln können Sie die Informationen überprüfen und werden hier nicht näher darauf eingehen.

Hier sprechen wir darüber, wie geeignete Selektoren entsprechend ihrer Gewichtung definiert werden:

(1) Versuchen Sie, keine ID-Selektoren

eine Seite zu verwenden Es ist nicht zulässig, zwei identische IDs in zu definieren, und der ID-Selektor hat ein hohes Gewicht. Wenn Sie den Elementstil überschreiben möchten, der den ID-Selektor verwendet, müssen Sie seinem Element einen neuen Selektor hinzufügen oder verwenden. Wichtig ist, dass das Ergebnis mehr Stilcode ist, der nicht wiederverwendet werden kann. Die beste Vorgehensweise besteht darin, nach Möglichkeit Selektoren mit geringerem Gewicht als Basisstil zu verwenden.

(2) Reduzieren Sie die Ebene der Unterselektoren

ist auch ein Prozess zur Reduzierung des Gesamtgewichts von Unterselektoren. Gleichzeitig ist die Abhängigkeit von der HTML-Struktur umso geringer, je weniger Ebenen vorhanden sind. Ein weiterer Grund für zu viele CSS-Ebenen ist der Missbrauch von Tools wie Sass und weniger. Dies ist auch ein Problem, das mir bewusst war, als ich es zum ersten Mal verwendete, da man Verschachtelungen und Referenzen verwenden kann, um Stile zu definieren, was ich gespeichert habe Es ist zwar ein großer Aufwand, aber die Datei muss am Ende trotzdem nicht so viel Code eingegeben werden, aber der generierte Code ist immer noch praktisch Besonderes Augenmerk muss auf die Reduzierung des Selektorniveaus gelegt werden.

(3) Verwendung kombinierter CSS-Klassenselektoren

Mit dieser Methode müssen Entwickler das Problem der CSS-Stilüberschreibungen nicht berücksichtigen und die Berechnung von Selektoren sowie den Gewichtungsprozess vermeiden Das Konzept der Kombination besteht darin, den variablen Teil und den stabilen Teil in einer komplexen übergeordneten Klasse zu trennen und den variablen Teil in mehrere einfache Klassen zu unterteilen Keine Vererbung zwischen Klassen, wodurch auch die Abhängigkeit von der HTML-Struktur verringert und die Wiederverwendbarkeit des Codes verbessert werden kann.

Wie werde ich mit dem IE-Browser kompatibel?

IE8 und niedrigere Versionen des IE-Browsers waren schon immer ein Ärgernis für Front-End-Entwickler. Der zusätzliche Code, der hinzugefügt wird, um mit ihnen kompatibel zu sein, wird zum Hack-Code, und die Leute wollen diesen Code oft nicht schreiben. Im Folgenden finden Sie einige praktische Methoden zur Kompatibilität mit IE-Browsern.

(1) Vertraut mit häufigen Stilkompatibilitätsproblemen in IE-Browsern

Ein Typ ist der Fehler des Browsers selbst, und der andere Typ ist nicht mit dem Standard kompatibel oder Unterstützt noch keine Standards.

(2) Separater stilkompatibler Code

Codedateien nach verschiedenen Versionen des Browsers organisieren und dann Beurteilungsanweisungen verwenden, um sie bei Bedarf zu laden

em, px oder %?

Der Grund, über dieses Thema zu sprechen, ist, dass die Seitenfunktionen heutzutage immer umfangreicher werden und immer mehr Geräte für den Zugriff auf die Seite verwendet werden. Das Layout der Seite ist recht Anspruchsvolle Sache, und die Seite Die Größe und Schriftart der Elemente, die Größe der Bilder usw. hängen ebenfalls eng mit dem Layout zusammen. Vor diesem Hintergrund begann die Front-End-Entwicklung, darauf zu achten, wie das Seitenlayout verbessert werden kann. Die Kernidee besteht darin, die Größe und Schriftgröße von Seitenelementen auf relative Werte festzulegen. Zu den relativen Schriftarteinheiten gehören: em, ex, ch, rem. Es besteht keine Notwendigkeit, ins Detail zu gehen, es gibt weitere Informationen, die erläutert werden müssen. Hier sind einige Best Practices:

(1) Versuchen Sie, relative Größen festzulegen

Die sogenannte Einstellung relativer Größen bedeutet nicht, dass das Gesamtlayout der Seite geändert wird ist adaptiv, die Gesamtgröße kann je nach Design der Seite fest oder adaptiv sein.

(2) Verwenden Sie absolute Größen nur, wenn die Elementgröße vorhersehbar ist

Zum Beispiel erfordert das Design die Verwendung absoluter Breiten, wie Gesamtbreite und Seitenleistenbreite . , die Höhe der Seitenkopf- und -fußzeile ist festgelegt usw. Bei der Anzeige von Bildern und Videos werden die besten Ergebnisse für die Darstellung dieser Multimedia-Elemente erzielt.

(3) Verwendung von em zum Festlegen der Schriftgröße

Die Verwendung von px zum Festlegen der Schriftgröße weist eine schlechte Skalierbarkeit auf, und die Verwendung von Prozentsätzen zum Festlegen der Schriftgröße ist ebenfalls unkonventionell, am besten Methode besteht darin, em zum Festlegen der Schriftgröße zu verwenden. Mit zunehmender Schrifteinstellung erhöht diese Methode jedoch die Wartungskosten. Zu diesem Zweck führt CSS3 die rem-Einheit ein, die relativ zur Schriftgröße des Stammelements berechnet wird. Dadurch wird dieses Problem vermieden. Dieses Problem wird derzeit von den meisten Browsern außer IE8 und niedriger unterstützt.

Viele Dinge in diesem Artikel werden nur erwähnt. Ich hoffe, dass er einigen Anfängern eine Orientierung und Hilfe bieten kann. Jeder wird in seiner eigenen schrittweisen Praxis einige Gefühle, Erfahrungen, Lektionen usw. haben. Ich glaube, dass es sehr nützlich sein wird, sie oft zusammenzufassen und in die nächste Praxis einfließen zu lassen. Kommt alle zusammen! ~

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Methoden zur Verbesserung der CSS-Leistung

Das obige ist der detaillierte Inhalt vonZusammenfassung der hohen Leistung beim Schreiben von Code mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!