Wenn wir in Website-Projekten mit immer größeren CSS- und Javascript-Dateien konfrontiert werden, sei es für die Sekundärentwicklung oder das Browser-Parsen, sollten deren Codes optimiert werden, aber Optimierung bedeutet nicht einfach, die Dateigröße zu komprimieren oder zu reduzieren. Eine klare Organisation und eine hohe betriebliche Effizienz sind die von uns gewünschten Ergebnisse. Welche Methoden gibt es also, um unseren CSS-Code zu verbessern? Schauen wir uns unten einige Vorschläge an.
1. Die Verwendung von
Abkürzungen kann Ihre Arbeitszeit verkürzen und die Größe Ihrer Dateien verringern.
Legen Sie unterschiedliche Werte für ähnliche Unterschiede fest:
Klartext in Zwischenablage anzeigen und drucken?
P {
Rand oben: 10px;
Rand rechts: 20px;
Rand unten: 30px;
Rand links: 40px;
}
P {
Rand oben: 10px;
Rand rechts: 20px;
Rand unten: 30px;
Rand links: 40px;
}
Abkürzungen verwenden:
Klartext in Zwischenablage anzeigen und drucken?
p { Rand: 10px 20px 30px 40px }
p { Rand: 10px 20px 30px 40px }
Werfen wir einen Blick auf die Abkürzungen häufig verwendeter Schriftarten
Sehen Sie sich den CSS Shorthand Guide (Englisch) und Efficient CSS with Shorthand Properties (Englisch) an, um mehr über Shorthand-Eigenschaften zu erfahren.
2. Vermeiden Sie die Verwendung von Hacks
Jon Hicks Blog hicksdesign.co.uk/journal Die Verwendung eines Browser-bedingten Kommentar-
Hacks ist eine schlechte Sache, da er den gleichen Code für verschiedene Browser definiert, was CSS umständlich macht. Jetzt wissen wir, dass bedingte Kommentare anstelle von Hacks verwendet werden müssen. Sie werden in IE6 und IE7 akzeptiert und sogar das IE-Team empfiehlt ihre Verwendung. Verwenden Sie bedingte Kommentare, um CSS-Code bereitzustellen, der für Browserfunktionen spezifisch ist. Daher wird kleinerer Kern-CSS-Code verwendet, um Browsern zu dienen, die den Standards entsprechen. Er wird nur heruntergeladen, wenn die erforderlichen Bedingungen vorliegen (z. B. IE). !
Schauen wir uns ein Codebeispiel mit bedingten Kommentaren in IE6 an:
Klartext in Zwischenablage anzeigen und drucken?
Dieser Code veranlasst IE6, zusätzliche ie6.css herunterzuladen, um seinen dedizierten CSS-Code zu analysieren. Wenn Sie auf IE7 abzielen, ersetzen Sie einfach 6 und 7 oben.
3. Verwenden Sie Leerzeichen,
sei es für Ihre eigene Lektüre oder für die sekundäre Entwicklung, Sie müssen eine gute Lesbarkeit von CSS gewährleisten.
Wir empfehlen Ihnen nicht, alle Leerzeichenformatierungen wie Tabulatoren, Zeilenumbrüche, Leerzeichen usw. zu entfernen, um eine kleinere CSS-Datei zu erhalten. Es wird empfohlen, verschachtelten Code mit einem Tabulator einzurücken und alle Attribute in einer separaten Zeile zu platzieren.
Welches Format kann Ihnen beim Vergleich der Bilder oben und unten helfen, mehr Zeit bei Änderungen zu sparen? Leerzeichen erleichtern Ihnen die Verwaltung Ihres Codes.
4. Entfernen Sie redundante Frameworks und Resets
Setzen Sie die vom 960 Grid System CSS-Framework von Nathan Smith verwendeten Regeln zurück.
Wenn Sie sich für die Verwendung eines CSS-Frameworks entscheiden, einschließlich eines, das Sie selbst geschrieben haben, werden Sie bei der Überprüfung des Codes mit Sicherheit feststellen, dass einige der im Framework enthaltenen Regeln nicht auf Ihr aktuelles Framework zutreffen Datei kann gelöscht werden.
Denkbar ist das Zurücksetzen von YUI Grid CSS und das Zurücksetzen von Eric Meyer. Durch Zurücksetzen können die Standardstile verschiedener Browser entfernt werden, sodass sich die Seite browserübergreifend konsistent verhält. Sie enthalten jedoch normalerweise alle Attribute, die eine große Website benötigt, wie z. B. pre, code, sub, dfn, var usw., die für normale Websites überhaupt nicht verwendet werden können. Eric Meyer würde Sie ermutigen, dasselbe zu tun!
Framework und Reset werden Ihnen bei Ihrer Arbeit sehr helfen, aber wenn Sie die nicht benötigten Verwendungen nicht entfernen, wird dies die Effizienz und Lesbarkeit Ihrer Seiten beeinträchtigen.
5. Erweitertes CSS
Stopdesign.com CSS von Doug Bowman Verwenden Sie spezielle Selektoren für Ebenen.
Eine andere Möglichkeit, Ihren Code zu optimieren, besteht darin, spezifische Eigenschaften für jede Ebene zu deklarieren.
6. Dokumentieren Sie Ihre Arbeit
Bei der Teamzusammenarbeit ist es äußerst wichtig, Schreibstandards, Codierungsstandards, Annotationsmethoden und Stil zu kommunizieren. Regeln basieren auf einem einheitlichen Ansatz für Standards. Dadurch wird verhindert, dass andere Ihre bereits geleistete Arbeit duplizieren, und es wird verhindert, dass der Code erweitert wird.
7.
Um dem Browser mehr Download- und Ladezeit zu sparen, ist Komprimierung eine gute Lösung, allerdings nur beim Veröffentlichen. YUI Compressor und CSSTidy sind Experten auf diesem Gebiet. Sie können redundanten Code entfernen und Fehler überprüfen, wenn sich Eigenschaften überschneiden.
Viele gängige Editoren wie BBEdit, TextMate und TopStyle können Ihnen dabei helfen, Ihren CSS-Code nach Ihren Wünschen zu formatieren. Sie können PHP auch verwenden, um Ihr CSS mithilfe der Serverkomprimierungstechnologie zu verarbeiten. Weitere CSS-Optimierungs- und Komprimierungstools finden Sie hier.
Zu einem bestimmten Zeitpunkt minimierten diese Verfahren das Auftreten von Fehlern, waren jedoch nicht perfekt. Ebenso ist es am besten, sie nicht für Dateien zu verwenden, die CSS-Hacks enthalten. Dies ist ein weiterer Grund, Hacks in separaten Dateien zu speichern.
Beenden
------------------------------------------------- ----------------------------------
Bei sauberem und optimiertem Code geht es nicht nur um Ihre Dateigröße, sondern auch darum Wartbarkeit und Benutzerfreundlichkeit. Die oben genannten Prinzipien gelten nicht nur für CSS, sie können auch auf HTML, Javascript und andere Programmiersprachen angewendet werden. CSS-Dateien dienen nicht nur der Präsentation für den Endbenutzer Ihrer Website. Die oben genannten Prinzipien können sowohl die Benutzererfahrung als auch die Entwicklererfahrung verbessern. Wenden Sie diese Prinzipien auf Ihre zukünftigen Projekte an und Sie werden mit Sicherheit bedeutende Ergebnisse erzielen.