Shorthand CSS это создание элементов CSS с минимальным кодом при написании файлов стилей.
Longhand CSS это создание элементов CSS с длинными длинными кодами при написании файлов стилей.
При использовании Shorthand CSS количество загрузок уменьшается, и количество загрузок, которые будет загружать браузер, также уменьшится, что положительно скажется на производительности.
Например, при назначении свойства margin HTML-элементу margin-top: 5px, margin-right: 6px, margin-bottom: 7px, margin-left: 8px;
каждый угол можно определить с помощью отдельных свойств CSS, но вместо этого margin: 5px 6px 7px 8px;
Существует более короткое использование в форме, и это более короткое использование более эффективно.
Использование нескольких кодов CSS при сокращении не может рассматриваться как большая экономия, но разница станет очевидной по мере увеличения количества элементов файла стиля.
На изображении ниже простой тест показывает разницу. Один из двух разных файлов CSS представляет собой файл стиля с коротким текстом (shorthand.css), а другой — файл стиля с длинным текстом (longhand.css).
В то время как shorthand.css занимает 238 байт, longhand.css занимает 567 байт файлов стилей, которые работают точно так же. Короткий CSS-файл загружается за 16 мс, а длинный типизированный CSS-файл загружается за 20 мс. Размеры файлов в примере могут быть небольшими, но эта разница будет увеличиваться по мере увеличения количества элементов CSS.
Примечание: Время загрузки файлов может меняться при каждой перезагрузке, но между ними все равно будет разница.
/* 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;
}