CSS-Dokumente

Shorthand CSS und Longhand CSS

04/04/2023
Shorthand CSS

Was ist Shorthand CSS?

Shorthand CSS ist die Erstellung von CSS-Elementen mit minimalem Code beim Schreiben von Stildateien.

Was ist Longhand CSS?

Longhand CSS ist die Erstellung von CSS-Elementen mit langen langen Codes beim Schreiben von Stildateien.

Shorthand CSS vs Longhand CSS

Bei der Verwendung von “Shorthand CSS” wird die Anzahl der Ladevorgänge reduziert und die Anzahl der Ladevorgänge, die der Browser lädt, wird ebenfalls abnehmen, was positiv zur Leistung beiträgt.

Wenn Sie beispielsweise einem HTML-Element die Eigenschaft margin zuweisen, margin-top: 5px, margin-right: 6px, margin-bottom: 7px, margin-left: 8px; Jede Ecke kann mit separaten CSS-Eigenschaften definiert werden, aber stattdessen margin: 5px 6px 7px 8px; Es gibt eine kürzere Nutzung in Form von und diese kürzere Nutzung ist effizienter.

Die Verwendung von ein paar CSS-Codes beim Kürzen mag nicht als große Einsparung angesehen werden, aber der Unterschied wird deutlich, wenn die Anzahl der Style-Datei-Elemente zunimmt.

Im Bild unten zeigt ein einfacher Test den Unterschied. Eine der 2 verschiedenen CSS-Dateien ist eine kurz geschriebene Stildatei (shorthand.css), während die andere eine lang geschriebene Stildatei (longhand.css) ist.

Google Inspect Shorthand vs Longhand

Während shorthand.css 238 B groß ist, nimmt longhand.css 567 B der Stildateien ein, die genau dieselbe Leistung erbringen. Die kurze CSS-Datei wird in 16 ms geladen, während die lange typisierte CSS-Datei in 20 ms geladen wird. Die Dateigrößen im Beispiel mögen klein sein, aber dieser Unterschied wird größer, wenn die Anzahl der CSS-Elemente zunimmt.

Hinweis: Die Ladezeiten der Dateien können bei jedem Neuladen variieren, aber es wird immer noch einen Unterschied zwischen ihnen geben.

Margin CSS

/* Longhand CSS */

.margin {
   margin-top: 5px;
   margin-right: 6px;
   margin-bottom: 7px;
   margin-left: 8px;
}

/* Shorthand CSS */

.margin { 
   margin: 5px 6px 7px 8px;
}

Padding CSS

/* Longhand CSS */

.padding {
padding-top: 5px;
padding-right: 6px;
padding-bottom: 7px;
padding-left: 8px;
}

/* Shorthand CSS */

.padding { 
padding: 5px 6px 7px 8px;
}

Border CSS

/* Longhand CSS */

.border {
border-width: 1px;
border-style: solid;
border-color: #fff;
}
/* Shorthand CSS */

.border {border: 1px solid #fff;}

Flex CSS

/* Longhand CSS */

.flex {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;
}

/* Shorthand CSS */

.flex {
flex: 0 0 50%;
}

Transition CSS

/* Longhand CSS */

.transition {
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}

/* Shorthand CSS */

.transition {
transition: 1s all ease;
}

Overflow CSS

/* Longhand CSS */

.overflow {
overflow-x: hidden;
overflow-y: hidden;
}

/* Shorthand CSS */

.overflow {
overflow: hidden;
}