Shorthand CSS ist die Erstellung von CSS-Elementen mit minimalem Code beim Schreiben von Stildateien.
Longhand CSS ist die Erstellung von CSS-Elementen mit langen langen Codes beim Schreiben von Stildateien.
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.
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.
/* Longhand CSS */
.margin {
margin-top: 5px;
margin-right: 6px;
margin-bottom: 7px;
margin-left: 8px;
}
/* Shorthand CSS */
.margin {
margin: 5px 6px 7px 8px;
}
/* Longhand CSS */
.padding {
padding-top: 5px;
padding-right: 6px;
padding-bottom: 7px;
padding-left: 8px;
}
/* Shorthand CSS */
.padding {
padding: 5px 6px 7px 8px;
}
/* Longhand CSS */
.border {
border-width: 1px;
border-style: solid;
border-color: #fff;
}
/* Shorthand CSS */
.border {border: 1px solid #fff;}
/* Longhand CSS */
.flex {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;
}
/* Shorthand CSS */
.flex {
flex: 0 0 50%;
}
/* Longhand CSS */
.transition {
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}
/* Shorthand CSS */
.transition {
transition: 1s all ease;
}
/* Longhand CSS */
.overflow {
overflow-x: hidden;
overflow-y: hidden;
}
/* Shorthand CSS */
.overflow {
overflow: hidden;
}