CSS-Kurzhandschrift vs. Langhand - Wann ist welche zu verwenden?

Shorthand und Longhand - eine ist prägnant und die andere präzise. Der eine ist aus dem Mangel an Kürze entstanden, während der andere fest entschlossen ist, Klarheit zu bewahren. So oder so, sie haben sozusagen ihre Ziele, Vor- und Nachteile.

In diesem Beitrag werden sowohl die CSS-Kurznotizen als auch die Langhandnotationen beleuchtet, und es wird der Schluss gezogen, welcher für welche Situation am besten geeignet ist.

Was ist Abkürzungseigenschaft?

Abkürzungseigenschaft ist eine Eigenschaft, die die Werte für andere CSS-Eigenschaftssätze übernimmt. Zum Beispiel können wir einen Wert für zuweisen Rahmenbreite, Grenzstil und Randfarbe Verwendung der Rand Eigentum allein.

Grundsätzlich gilt,

 Rand: 1px durchgehend blau; 

ist das gleiche wie:

 Randbreite: 1px; Bordüre: solide; Randfarbe: blau;

Damit müssen wir nicht einzelne Eigenschaftswerte separat deklarieren (was redundant, zeit- und platzaufwendig ist). Es setzt auch die ausgelassenen Eigenschaften in der Deklaration zurück, was genutzt werden kann.

Wie funktioniert es?

Wie bereits erwähnt, schreiben wir eine Reihe anderer Eigenschaftswerte in der Kurzschreibweise. Die Reihenfolge spielt keine Rolle, wenn alle Eigenschaftswerte in der Kurzschreibweise stehen sind von einer anderen Art wie in Rand. Für Immobilien mit ähnliche Werte wie Marge, Ordnung ist wichtig. Wenn Sie Zweifel haben, denken Sie im Uhrzeigersinn!

Was passiert, wenn wir ein oder zwei Eigenschaften in der Deklaration vermissen? Nehmen wir im obigen Beispiel an, wir hätten es ignoriert Grenzstil.

 Rand: 1px blau; 

Wir werden die Grenzen nicht mehr sehen können, nicht weil die Abkürzung nicht funktioniert hat, sondern weil die Grenzstil die wir ausgelassen haben, haben den Standardwert erhalten keiner. So wurde diese Kurzschrift-Eigenschaft gerendert.

 Rand: 1px kein Blau; 

Lassen Sie uns jetzt die 1px zum Rahmenbreite und behalte die anderen beiden:

 Rand: durchgehend blau;

Wir werden die Grenzen nur mit einer dickeren Breite sehen können, und das liegt daran, dass die Grenzen größer sind Rahmenbreite Eigenschaft hat den Standardwert erhalten Mittel.

 Rand: mittel blau 

Das schließt für uns das wenn ein Eigenschaftswert weggelassen wird in einer Abkürzung, Diese Eigenschaft nimmt ihren Standardwert an (auch wenn es einen vorherigen Wert überschreiben muss).

Wenn da ist Randbreite: 1px; für ein Element irgendwo zuvor Rand: durchgehend blau; für das gleiche wird die Randbreite sein Mittel (der Standardwert), nicht 1px.

Eine andere erwähnenswerte Sache ist das Wir können keine Werte wie verwenden erben, Initiale oder unset, Diese stehen für alle CSS-Eigenschaften in Kurzschreibweise zur Verfügung. Wenn wir diese verwenden, kann der Browser nicht genau wissen, welche Eigenschaft der Wert in der Abkürzung darstellen soll - Die gesamte Deklaration wird gelöscht.

Das alles Eigentum

Es gibt eine CSS-Abkürzungseigenschaft, die dies ermöglicht Legen Sie den Wert für alle CSS-Eigenschaften fest. CSS-weite Werte erben, Initiale und unset gelten für alle Eigenschaften und daher sind dies die einzigen von der alles Eigentum.

 div all: initial

Das wird das machen div element ditch ALLE CSS-Eigenschaftswerte, die es hatte, und setzen Sie den Standardwert in jedem von ihnen zurück.

⚠ Warnung

Lass uns das nicht missbrauchen alles Eigentum. Die Notwendigkeit dafür kann nur in sehr seltenen Fällen auftreten, wenn wir keinen vorherigen CSS-Code eines Elements berühren können, auf das wir diese Eigenschaft anwenden möchten.

Hinweis: CSS-Eigenschaft Farbe nimmt den Hexadezimalwert mit der Kurzschreibweise, wenn die beiden Zahlen des Hexadezimalwerts in jedem Farbkanal gleich sind. Zum Beispiel, Hintergrund: # 445599; ist das gleiche wie Hintergrund: # 459;.

Was ist langjähriges Eigentum?

Das individuelle Eigenschaften die in einer Kurzschreibweise enthalten sein können, werden als Langschreibweise bezeichnet. Einige Beispiele sind; Hintergrundbild, Rand links, Animationsdauer, usw.

Warum sollten wir es benutzen??

Obwohl Abkürzungsalternativen praktisch sind, haben sie doch einen Nachteil. Erinnern wir uns am Anfang, wie wir gesehen haben, wie die Kurzschreibweise ausgelassene Eigenschaften mit ihren Standardwerten überschreibt? Dies kann ein Problem sein, wenn das Zurücksetzen nicht erwünscht ist.

Nehmen Sie die Schriftart Abkürzungseigenschaft zum Beispiel. Lass es uns in der verwenden h4 Element (das einen Standardbrowser-Stil hat) Schriftdicke: fett)

 Schriftart: 20px "Kurier neu"; 

In der obigen Kurzschreibweise steht kein Wert für Schriftgewicht Eigentum, daher die Schriftdicke: fett(Browser-Standardstil) wird durch den Standardwert überschrieben Schriftgewicht: normal verursacht die h4 Element, um seinen kühnen Stil zu verlieren, der möglicherweise nicht beabsichtigt wurde.

Für das obige Beispiel also zwei einfache Eigenschaften, Schriftgröße und Schriftfamilie sind perfekt.

Verwenden Sie auch die Abkürzung für Das Zuweisen von nur einem oder zwei Eigenschaftswerten ist nicht sehr nützlich. Warum sollten Sie dem Browser zusätzliche Arbeit geben, um jede einzelne Eigenschaft (einschließlich der ausgelassenen) in der Abkürzung zu interpretieren, wenn nur eine für die Arbeit benötigt wird?

Abgesehen von der Produktion können einige Entwickler (insbesondere Anfänger) die Verwendung von Langschreibweise viel einfacher als Kurzschrift verwenden bessere Lesbarkeit und Übersichtlichkeit.

Fazit

Mit der Möglichkeit der schnellen Codierung (mit Hilfe von Tools wie Emmet) und Minification wird heutzutage keine hohe Zuverlässigkeit für die Abkürzung benötigt, gleichzeitig ist es jedoch sehr logisch zu tippen Marge: 0;. Der Kontext, in dem wir unsere CSS-Notationen bevorzugen, wird variieren und wir müssen nur herausfinden, welche Notation für uns am besten funktioniert und wann.