CSS steht für Cascading Stylesheets, was ein wichtiger Aspekt des modernen Webdesigns ist. Wenn Sie ein Webdesigner sind und wissen, wie man WordPress-Themes oder Blogger-Templates gestaltet, können Sie CSS nicht mehr ignorieren. Wenn Sie jedoch einen Blog haben und die CSS-Dateien für eine bessere Leistung und schnelleres Laden optimieren möchten, finden Sie hier alle Tools, die Sie benötigen.

So finden Sie die CSS-Datei Ihrer Blogvorlage

Wenn sich Ihr Blog auf WordPress befindet, wird die CSS-Datei idealerweise im Themenordner unter wp-content / themes / yourtheme platziert . Um den genauen Standort zu erfahren, öffnen Sie Ihr Blog und überprüfen Sie die Seitenquelle. Sie finden einen Link zum CSS Ihres Themas, wie unten gezeigt

Wenn sich Ihr Blog auf Blogger befindet, öffnen Sie das Blogger-Dashboard und wechseln Sie zum Tab "Layout". Wählen Sie "HTML bearbeiten" und das Kontrollkästchen "Widget-Vorlagen erweitern". Kopieren Sie als Nächstes den CSS-Code in eine Notepad-Datei, die direkt nach dem öffnenden body-Tag definiert wurde.

Laden Sie eine Kopie dieser Datei herunter und führen Sie die in diesem Lernprogramm beschriebenen Änderungen durch. Es wäre besser, wenn Sie eine Sicherungskopie des Stylesheets erstellen, damit Sie das Design Ihrer Site wiederherstellen können, indem Sie das Backup verwenden.

Optimiere den CSS-Code

Formatieren Sie Ihren CSS-Code

Der erste Schritt zur Optimierung von CSS-Code ist die richtige Formatierung. Sie sollten die Stilelemente und die Attribute sorgfältig formatieren, damit sie leicht zu verstehen sind. Darüber hinaus sollte der Code so geschrieben werden, dass er sich nicht mit anderen Klassen oder IDs überschneidet. Den Code manuell zu formatieren ist eine schwierige Aufgabe und Sie können das Format CSS-Tool verwenden, um zu beginnen.

Kopieren Sie das Stylesheet, das Sie formatieren möchten, und fügen Sie es in das Textfeld ein. Wählen Sie als Nächstes die bevorzugten Formatierungsregeln aus dem rechten Bereich.

Beispiel: Sie möchten möglicherweise nach der CSS-Eigenschaft jedes div-Tags eine neue Zeile einfügen. Sie können auch alle weißen Leerzeichen nach einem Semikolon entfernen. Legen Sie alle Regeln fest, die das Programm ausführen soll, und klicken Sie dann auf die Schaltfläche "CSS formatieren". Alle angegebenen Regeln werden angewendet und der Code wird wie folgt formatiert:

Optimiere CSS, um Redundanzen zu entfernen

Nachdem Sie Ihren Code für die Lesbarkeit formatiert haben, ist es Zeit für eine Optimierung. Gehen Sie zu Online CSS Optimizer und fügen Sie den gesamten Code in das Textfeld ein. Sie können auch die URL Ihrer CSS-Datei eingeben, wenn Sie möchten.

Dieses Tool kann für folgende Zwecke verwendet werden:

  • Konvertieren Sie alle RGB-Farbwerte in Hexadezimalwerte, um den Overhead zu reduzieren und die Effizienz zu erhöhen.
  • Entferne alle Kommentare und Leerstellen.
  • Optimieren Sie die Grenzwerte zu modernen Metriken. Zum Beispiel: der Attributrahmen: 2px 5px 2px 5px wird in border geändert: 2px 5px ;.
  • Konvertiere absolute Werte in relative Werte. Zum Beispiel: das Attribut font-size: 18px; kann in Schriftgröße geändert werden: 2em;
  • wandelt mehrere Hintergrund-, Schriftarten-, Rand-, Füll- und Listenattribute in ein einziges Attribut um.

Reinigen Sie Ihre CSS-Datei und reduzieren Sie die Größe

Jetzt ist es an der Zeit, den CSS-Code auf Fehler zu überprüfen und die Dateigröße zu reduzieren. Das Reduzieren der Größe von CSS ist wichtig, da es die Ladezeit der Seiten Ihres Blogs beeinflusst. Gehen Sie zu CSS bereinigen und fügen Sie den CSS-Code ein, den Sie im vorherigen Schritt optimiert haben. Wählen Sie den Komprimierungsmodus als höchsten und wählen Sie die unten gezeigten Optionen

Clean CSS basiert auf CSS Tidy und kann verwendet werden, um Kurzschrifteigenschaften zu kombinieren, Farben und Schriftschnitte zu komprimieren. Ein ähnliches Werkzeug zum Komprimieren von CSS-Code zum schnelleren Laden ist CSS-Laufwerk.

Einige Hinweise

Im Folgenden finden Sie einige Tipps und Tricks, die Sie beim Schreiben des CSS-Codes für die Vorlage Ihres Blogs beachten sollten:

1. Verwenden Sie immer externe Stylesheets, anstatt den gesamten Code vor dem Tag einzufügen.

2. Verwenden Sie universelle Klassen, um Wiederholungen zu vermeiden. Beispiel: Sie können eine einfache Klasse div.floatleft {float: left;} verwenden, um jedes Element nach links zu verschieben, anstatt dasselbe Attribut für mehrere Klassen zu verwenden.

3. Verwenden Sie browserspezifische CSS-Dateien zum Beheben von Fehlern. Das heißt, wenn Sie einen Fehler entdecken, der nur in einem bestimmten Browser auftritt (normalerweise Internet Explorer 6 oder ältere Versionen), verwenden Sie ein separates Stylesheet, um diesen Fehler zu beheben. Dies hält Ihr Haupt-Stylesheet ordentlich und sauber.

Für WordPress-Blogger : Abgesehen von der Optimierung des CSS-Codes, müssen Sie herausfinden, wie Sie die Ladezeit von Blogs reduzieren und wie Sie die WordPress-Datenbank bereinigen sollten.

Hast du das CSS deiner Blogvorlage schon optimiert? Was sind Ihre Lieblingswerkzeuge für die Optimierung von CSS-Code? Teilen Sie Ihre Ideen in den Kommentaren.