Springe zum Hauptinhalt

10 CSS Tricks Ihren Workflow zu verbessern

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Das Schreiben von CSS ist nicht einfach, denn wenn Sie nicht aufpassen, können Sie überfüllten Code schreiben, langsam sein und beim Schreiben Ihres Codes sehr viel Zeit für das Debuggen von Code benötigen.

Kommen wir gleich zum Punkt: In diesem Tutorial habe ich einige Tipps zusammengestellt, mit denen Sie Ihre Leistung beim Schreiben von CSS-Code verbessern können. Sie können sie jederzeit in Ihren alten oder neuen Projekten implementieren.

Wir werden erforschen:

1. Die Sammlung von Eigenschaften

Wenn Sie feststellen, dass Sie dieselben Eigenschaften mehrmals geschrieben haben, stellen Sie sicher, dass Sie sie nicht abschneiden können, indem Sie unnötige Klassen und IDs entfernen. Fügen Sie dann alle allgemeinen Eigenschaften in einer einzigen Klammer hinzu.

Wenn Sie Ihre Abschnitte verknüpfen können, können Sie eine Datei erstellen, die effizienter arbeitet und viel schneller ist.

2. Benutze die Identifikatoren für die Konstanten

Die unglückliche Einschränkung von CSS ist, dass Sie keine Konstanten wie in PHP definieren können. Konstanten sind Begriffe, die Sie einmal definieren können und die vom Rest des Skripts unabhängig vom Umfang des Codes und der Einschlüsse verwendet werden.

Sie können die mehrfache Erstellung mehrerer Stile beenden, um sich für einen Typ zu entscheiden, den Sie als Entwurfsblock definieren. Da CSS nicht für die Programmierung Ihrer Website erstellt wurde, können Sie sozusagen nur als Innenarchitekt fungieren und Konstanten nicht unterstützen.

Dies ist jedoch sehr hilfreich, insbesondere für den Fall, dass die Bündelung Ihrer Immobilien nicht die ganze Arbeit für Sie erledigt.

Sie können eine ID erstellen, die alle benötigten Stile enthält. Wenn Sie es wirklich benötigen, fügen Sie einfach die Selektoren hinzu, die Sie für die Deklaration benötigen. Dadurch können Sie Ihren CSS-Code viel schneller schreiben.

3. Kommentieren Sie Ihre Konstanten

Natürlich unterstützt CSS keine Konstanten, aber das bedeutet nicht, dass Sie immer noch keine Referenz für Konstanten schreiben können. Warum nicht die gängigen Stile in einem mehrzeiligen Kommentar auflisten?

Es liegt an Ihnen, zu bestimmen, wie Sie diese Kommentare eingeben. Sie können jedoch eine Art Materialtabelle erstellen, die der folgenden ähnelt:

/ * * CSS 'Konstanten' * * Hintergrund: #ccc9c9 * Tiefgrau, Text: #3a3838 * Hauptinhalt Hintergrund: #e7e7e7 * * /

Dies ist besonders nützlich für mich, da es für mich nicht immer einfach ist, schnell die funktionalen Details eines (konstanten) Codeblocks zu kennen. Ein Rückruf in der Nähe beschleunigt den Codierungsprozess, da Sie genau wissen, wo Sie suchen müssen, und nicht durch einen Berg von CSS suchen müssen, um den Punkt zu finden, an dem Sie sich auf einen bestimmten Stil bezogen haben.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

4. Gruppierte Selektoren

Warum dort aufhören? Wenn Sie schon dabei sind, warum nicht viele Selektoren zusammenfassen, die zusammengestellt werden können? Dies erspart Ihnen die Mühe, denselben Stil mehrmals einzugeben:

h1, h2, h3, h4, p {padding: 1 em; Schriftfamilie: "Times New Roman", Zeit, Serif; } .navigation ul, .navigation li {padding-top: 0,5 em; }

Dies funktioniert möglicherweise nicht in allen Fällen und das obige Beispiel trifft sicherlich nicht auf Ihre spezifischen Anforderungen zu. Es kann jedoch als Erinnerung für das nächste Codieren dienen und Zeit sparen. und im Weltraum.

5. Verwenden Sie einen Präprozessor

Ein CSS-Präprozessor ist eine Erweiterung der regulären CSS-Sprache, mit der Sie schneller codieren und viele andere Funktionen hinzufügen können, die Sie normalerweise nicht so einfach hinzufügen können.

Die gängigsten CSS-Präprozessoren in WordPress sind SASS und LESS und Sie können lernen, beide zu verwenden.

CSS-Präprozessoren erleichtern die Arbeit erheblich, und es ist ziemlich normal zu sehen, wie viel Entwickler sich darauf einlassen, sobald sie den Dreh raus haben.

6. Die Pseudoklassen

Wie CSS-Spezialist Eric Meyer erklärt,  Die Liste der Arten von Links in einer bestimmten Reihenfolge ist wichtig. Andernfalls erhalten Sie möglicherweise gestaltete Links, die nicht so funktionieren, wie Sie es sich erhofft haben.

Sie können dies bekämpfen und Zeit sparen, indem Sie diese Art von Problem in Zukunft nicht mehr lösen müssen, indem Sie eine einfache Reihenfolge für die Pseudoklassen der Links einhalten. Sie können sich diese Reihenfolge mit dem folgenden Gerät merken:

a: link {deklaration} a: besucht {deklaration} hover {deklaration} a: aktiv {deklaration}

le style des liens non-visités sont définis en premier, ensuite visité, lors du survol de la souris et les liens actifs. A vrai dire, l’ordre n’a pas réellement d’importance, le but est de pouvoir vous faire retenir cette combinaison le plus simplement possible. Cet ordre s’intitule “LoVe/HAte” pseudo-classes, en raison des lettres utilisées dans les pseudo-classes.

Malheureusement, cela ne comprend pas la pseudo-classe “focus”, bien qu’elle puisse être considéré comme la pseudo-classe “active”. Il y a aussi un phrasé mnémonique qui inclut cette pseudo-classe il s’agit de “LoVe Es tut weh Fade Away”:

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

a: link {deklaration} a: besucht {deklaration} a: hover {deklaration}

7. Verwenden Sie die CSS-Kurzform

Wenn Sie schnell und effizient codieren möchten, jedoch ohne eine steilere Lernkurve mithilfe eines Präprozessors, können Sie CSS-Kurzschrift codieren. Die Regeln sind viel einfacher zu erlernen, was Ihnen die Verwendung erleichtert.

Mit der CSS-Verknüpfung können Sie mehrere Zeilen zu einer zusammenfassen, ohne die Funktionalität zu verlieren. Im Folgenden sehen Sie beispielsweise drei Zeilen, die für den Rand eines Elements gelten:

#maincontent {border-width: 1px; Grenze-Stil: fest; Randfarbe: schwarz; }

Diese Zeile könnte viel einfacher sein:

#maincontent {border: 1px solid schwarz; }

8. Verwenden Sie Verknüpfungen für Bilder

CSS-Verknüpfungen sind möglicherweise nicht immer die beste Lösung für Sie, aber Sie können diese Regel anwenden, wenn Sie mit Farben arbeiten.

Anstatt einen 6-stelligen Hexadezimalcode zu verwenden, können Sie nur 3 Ziffern verwenden.

#ffffff = #fff #1144bb = #14b #ffcc44 = #fc4

Mit anderen Worten, wenn Sie sehen, dass ein Farbcode Paare hat (der erste und der zweite Wert, der dritte und der vierte und die letzten beiden Werte) wobei jedes Paar den gleichen Charakter hat. Sie können jedes dieser Zeichen für jedes Paar weglassen.

Es wird eine Weile dauern, bis man sich daran gewöhnt hat, aber das Opfer wird es wert sein. Wenn die anderen Formen von Verknüpfungen nicht üblich sind, müssen Sie sich hier keine Sorgen machen, da Farbverknüpfungen fast jedem bekannt sind.

9. Links benötigen kein Zitat und keinen Platz

Wenn Sie Ihrem Stylesheet einen URI hinzufügen, enthält das reguläre und korrekte Format einfache und doppelte Leerzeichen und Anführungszeichen, wie im folgenden Beispiel dargestellt:

Körper {
background-image: URL (“http://www.example.com/deepgray-pattern.png”);
}

Après “url(“, il y a un espace, des guillemets et un espace de fermeture qui sont en fait facultatif.

Um Ihnen etwas mehr Zeit und Platz zu sparen, kann dieselbe Zeile folgendermaßen geschrieben werden:

Körper {
background-image: URL (Http://www.example.com/deepgray-pattern.png);
}

Sie werden feststellen, dass der Platz und die Anführungszeichen nicht wirklich benötigt werden.

10. Analysiere deinen CSS-Code

Es ist wichtig, dass Sie Ihr Stylesheet nach Abschluss analysieren, um sicherzustellen, dass es so sauber und leicht wie möglich ist. Dies kann schmerzhaft sein, aber was noch wichtiger ist, es kann lange dauern, bis es erreicht ist.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Glücklicherweise gibt es kostenlose Tools wie CSS Analyzer, CSS Dig et CSS Fussel. Sie müssen lediglich Ihren Code eingeben, einige Optionen auswählen und auf eine Schaltfläche klicken, um sofort einen Bericht für Ihren CSS-Code zu erhalten.

CSS Lint ist noch schwerwiegender und kann Ihre Sensibilität im Namen des Fortschritts verletzen, indem es Ihnen hilft, Ihre Codierungsfähigkeiten zu verbessern.

In beiden Fällen sind dies alle einfachen Optionen, mit denen Sie das Parsen Ihres Stylesheets vereinfachen können, um sicherzustellen, dass es so heilig wie möglich ist.

Das ist es für diese Tipps, die Sie für Ihre verschiedenen CSS-Projekte verwenden können. Zögern Sie nicht, uns Ihre Tipps anzubieten.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
13 Aktien
Aktie12
tweet
Registrieren1