Unverzichtbare effiziente und saubere CSS-Codeprinzipien

1. Globales Zurücksetzen verwenden
Verschiedene Browserelemente haben unterschiedliche Standardattribute, um einige Standardattribute von Browserelementen zurückzusetzen, um Browserkompatibilität zu erreichen. Es ist jedoch zu beachten, dass die Methode „Global Reset:
*{ padding:0;“ nicht nur langsam und ineffizient ist, sondern auch zu einigen unnötigen Problemen führt Für das Element werden auch die Ränder und der Abstand zurückgesetzt. Es wird empfohlen, sich auf die Praktiken von YUI Reset und Eric Meyer zu beziehen. Das Zurücksetzen ist nicht statisch. Es muss entsprechend den unterschiedlichen Anforderungen des Projekts angepasst werden, um Browserkompatibilität und Bedienkomfort zu gewährleisten. Der Reset, den ich verwende, ist wie folgt:
/**Klare Innen- und Außenränder **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote,
dl, dt, dd, ul, ol, li,
pre,
form, fieldset, legend, button, input, textarea,
th, td,
img{
border:medium none;
margin: 0;
padding: 0;
}
/**Standardschriftart festlegen **/
body,button, input, select, textarea {
Schriftart: 12px/1,5 ,tahoma, Srial, Helvetica, Sans-Serif;
}
h1, h2, h3, h4, h5, h6 { Schriftgröße: 100 %; }
em{font-style:normal;}
/**Listenelemente zurücksetzen **/
ul, ol { list-style: none; }
/**Hyperlink-Element zurücksetzen **/
a { text-decoration: none; 333; }
a:hover { text-decoration: underline; color:#F40; 🎝> */
table { border-collapse: collapse; border-spacing: 0; }
Gute Benennungsgewohnheiten
Es besteht kein Zweifel, dass unordentlicher oder unsemantisch benannter Code jeden verrückt machen wird. Wie dieser Code:
.aaabb{margin:2px;color:red;}
Ich denke, nicht einmal ein Anfänger würde eine Klasse wie diesen in einem tatsächlichen Projekt benennen, aber haben Sie jemals darüber nachgedacht? auch sehr problematisch:

Mein Name ist Wiky

Wenn die ursprüngliche rote Schriftart in blau geändert wird, dann wird die Der Stil wird zu:
.red{color:bule;}
Eine solche Benennung ist sehr verwirrend. Der gleiche Name ist .leftBar. Es wird auch problematisch sein, wenn die Seitenleiste in die rechte Seitenleiste geändert werden muss. Bitte verwenden Sie daher nicht die Eigenschaften des Elements (Farbe, Position, Größe usw.), um eine Klasse oder ID zu benennen. Sie können eine sinnvolle Benennung wählen, wie zum Beispiel: #navigation{...}, .sidebar{.... }, .postwrap{ ...}
Auf diese Weise wird die Verbindung zwischen ihnen und HTML-Elementen nicht beeinträchtigt, egal wie Sie die Stile ändern, die diese Klassen oder IDs definieren.
Es gibt eine andere Situation. Einige feste Stile werden nach ihrer Definition nicht geändert. Dann müssen Sie sich bei der Benennung nicht um die gerade erwähnte Situation kümmern, z. B.
.alignleft{float:left;margin-. right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}
Dann Für so einen Absatz

Ich bin ein Absatz!

Wenn Sie diesen Absatz von der ursprünglichen linken Ausrichtung in eine rechte Ausrichtung ändern müssen, müssen Sie nur seinen Klassennamen in rechts ausrichten ändern.
3. Code-Abkürzung
Die CSS-Code-Abkürzung kann die Geschwindigkeit beim Schreiben von Code verbessern und die Codemenge vereinfachen. Es gibt viele Eigenschaften, die in CSS abgekürzt werden können, darunter Rand, Abstand, Rahmen, Schriftart, Hintergrund und Farbwerte usw. Wenn Sie lernen, den Code abzukürzen, sieht der Originalcode wie folgt aus:
li{
Schriftfamilie: Arial, Helvetica, serifenlos;
Schriftgröße: 1,2em;
Zeilenhöhe: 1,4em;
padding-top:5px;
padding-bottom: 10px;
padding -left:5px;
}
kann abgekürzt werden als:
li{
Schriftart: 1.2em/1.4em Arial, Helvetica, serifenlos;
padding :5px 0 10px 5px;
}
Wenn Sie mehr darüber erfahren möchten, wie diese Attribute abgekürzt werden, können Sie sich die „Zusammenfassung der allgemeinen CSS-Abkürzungssyntax“ ansehen.
4. CSS-Vererbung verwenden
Wenn mehrere untergeordnete Elemente des übergeordneten Elements auf der Seite denselben Stil verwenden, ist es am besten, dieselben Stile für ihre übergeordneten Elemente zu definieren und sie diese CSS-Stile erben zu lassen. Auf diese Weise können Sie Ihren Code gut pflegen und die Codemenge reduzieren. Dann sieht der ursprüngliche Code so aus:
#container li{ Font-Familie:Georgia, Serif }
#Container p{ Font-Familie:Georgia, Serif; :Georgia, Serif; }
kann abgekürzt werden als:
#container{ Font-Familie:Georgia, Serif; }
5. Sie können mehrere CSS-Selektoren zu einem zusammenführen sie haben einen gemeinsamen Stil. Dadurch bleibt der Code nicht nur prägnant, sondern Sie sparen auch Zeit und Platz. Zum Beispiel:
h1{ Font-Family:Arial, Helvetica, Sans-Serif; }
h3{ Font-Family:Arial, Helvetica, Sans-Serif; Font-Weight:normal; -serif ; Schriftstärke:normal;6. Angemessene Codekommentare
Codekommentare können anderen das Verständnis Ihres Codes erleichtern, und eine angemessene Organisation von Codekommentaren kann die Struktur klarer machen. Sie können am Anfang des Stylesheets ein Verzeichnis hinzufügen:
Dann ist die Struktur Ihres Codes auf einen Blick klar und Sie können den Code leicht finden und ändern.
Auch der Hauptinhalt des Codes sollte sinnvoll aufgeteilt werden und der Code sollte bei Bedarf sogar kommentiert werden, was auch der Teamentwicklung zuträglich ist:
/***   Kopfzeile  ***/
#header{ height:145px; position:relative;🎜>#header h1{ width:324px; #content{background:#fff; width:650px; float:left; overflow:hidden;}
#content h1{color:#F00}
#content .posts { overflow:hidden ; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:overflow:hidden; { clear:both; padding:50px 5px 0; overflow:hidden;🎜>#footer h4{ color:#b99d7f; >7. Sortieren Sie Ihren CSS-Code
Wenn die Eigenschaften im Code alphabetisch sortiert werden können, ist es schneller, Änderungen zu finden:
/*** Inhalt ***/
div{
Hintergrund- Farbe:#3399cc;
Farbe:#666;
Schriftart: 1,2em/1,4em Arial, Helvetica, serifenlos;
Höhe: 300px;
Rand: 10px 5px;
Polsterung :5px 0 10px 5px;
width:30%;
z-index:10;
}
8. Halten Sie CSS lesbar
Das Schreiben von lesbarem CSS erleichtert das Auffinden und Ändern von Stilen . Ich denke, es ist selbsterklärend, welcher der beiden folgenden Fälle besser lesbar ist.
/***    Fußzeile  ***/
div{
background-color:#3399cc;
color:#666;
font: 1.2em/1.4em Arial, Helvetica, sans- serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}
/*** Stileigenschaften sind alphabetisch sortiert ***/
div{ Hintergrundfarbe:#3399cc; Schriftart: 1,2em/1,4em Arial, Helvetica, serifenlos; Rand:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }
Wenn es um einige Selektoren mit weniger Stilattributen geht, schreibe ich eine Zeile:
/*** Schreiben Sie eine Zeile für jedes Stilattribut ***/
div{ background-color:#3399cc; color:#666;}
Diese Regel ist nicht streng, aber egal wie Sie sie schreiben, mein Vorschlag ist, den Code immer konsistent zu halten. Wenn es viele Attribute gibt, schreiben Sie diese in separate Zeilen. Wenn weniger als 3 Attribute vorhanden sind, können Sie eine Zeile schreiben.
9. Wählen Sie bessere Stilattributwerte
Einige Attribute in CSS verwenden unterschiedliche Attributwerte, es gibt jedoch Unterschiede in der Leistung, z. B.
Der Unterschied ist border: 0 auf 0px Obwohl es auf der Seite nicht sichtbar ist, rendert der Browser gemäß dem Standardwert von border immer noch border-width/border-color, was bedeutet, dass der Speicherwert belegt ist.
Und border:none setzt den Rand auf „none“, was bedeutet, dass es keinen Rand gibt. Wenn der Browser „none“ analysiert, führt er keine Rendering-Aktionen aus, das heißt, er verbraucht keine Speicherwerte. Daher wird die Verwendung von border:none;
empfohlen. Ebenso verbirgt display:none den Objektbrowser, rendert ihn nicht und belegt keinen Speicher. Und Sichtbarkeit: verborgener Wille.
10. Verwenden Sie
Erstens gehört @import nicht zum XHTML-Tag und ist nicht sehr kompatibel mit früheren Browsern Auswirkungen auf die Leistung der Website haben. Einzelheiten finden Sie unter „Hochleistungs-Website-Design: @import nicht verwenden“. Vermeiden Sie daher bitte die Verwendung von @import
11. Verwenden Sie externe Stylesheets
Dieses Prinzip ist immer eine gute Designpraxis. Es ist nicht nur einfacher zu warten und zu ändern, sondern, was noch wichtiger ist, die Verwendung externer Dateien kann die Seitengeschwindigkeit verbessern, da CSS-Dateien im Browser zwischengespeichert werden können. Das in das HTML-Dokument integrierte CSS wird bei jeder Anfrage erneut mit dem HTML-Dokument heruntergeladen. Daher besteht in praktischen Anwendungen keine Notwendigkeit, CSS-Code in HTML-Dokumente einzubauen:

oder

Verwenden Sie stattdessen< link> Externes Stylesheet importieren:

12. Vermeiden Sie die Verwendung von CSS-Ausdrücken (Expression)
CSS-Ausdrücke sind eine leistungsstarke (aber gefährliche) Möglichkeit, CSS-Eigenschaften dynamisch festzulegen. Internet Explorer unterstützt CSS-Ausdrücke ab Version 5. Im folgenden Beispiel können Sie CSS-Ausdrücke verwenden, um die Hintergrundfarbe stündlich zu ändern:
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ) ;
Wie oben gezeigt, wird der JavaScript-Ausdruck im Ausdruck verwendet. CSS-Eigenschaften werden basierend auf der Auswertung von JavaScript-Ausdrücken festgelegt.
Das Problem mit Ausdrücken besteht darin, dass sie häufiger ausgewertet werden, als wir denken. Nicht nur, wenn die Seite angezeigt und gezoomt wird, sondern auch, wenn die Seite gescrollt wird und sogar wenn die Maus bewegt wird, wird sie neu berechnet. Fügen Sie einem CSS-Ausdruck einen Zähler hinzu, um zu verfolgen, wie oft der Ausdruck ausgewertet wird. Sie können problemlos mehr als 10.000 Berechnungen durchführen, indem Sie einfach die Maus über die Seite bewegen.
Wenn Sie CSS-Ausdrücke verwenden müssen, denken Sie daran, dass diese tausende Male ausgewertet werden und sich möglicherweise auf die Leistung Ihrer Seite auswirken. Vermeiden Sie daher die Verwendung von CSS-Ausdrücken, es sei denn, dies ist unbedingt erforderlich.
13. Codekomprimierung
Wenn Sie sich entscheiden, Ihr Website-Projekt im Internet bereitzustellen, müssen Sie eine Komprimierung des CSS in Betracht ziehen, um Kommentare und Leerzeichen zu entfernen und das Laden der Webseite zu beschleunigen. Um Ihren Code zu komprimieren, können Sie einige Tools wie YUI Compressor
verwenden, die den CSS-Code rationalisieren und die Dateigröße reduzieren können, um die Ladegeschwindigkeit zu erhöhen.

Das obige ist der detaillierte Inhalt vonUnverzichtbare effiziente und saubere CSS-Codeprinzipien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!