CSS-свойства

CSS-документы

Shorthand CSS и Longhand CSS

29/05/2023
Shorthand CSS

Что такое Shorthand CSS?

Shorthand CSS это создание элементов CSS с минимальным кодом при написании файлов стилей.

Что такое Longhand CSS?

Longhand CSS это создание элементов CSS с длинными длинными кодами при написании файлов стилей.

Shorthand CSS против Longhand 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).

Google Inspect Shorthand vs Longhand

В то время как shorthand.css занимает 238 байт, longhand.css занимает 567 байт файлов стилей, которые работают точно так же. Короткий CSS-файл загружается за 16 мс, а длинный типизированный CSS-файл загружается за 20 мс. Размеры файлов в примере могут быть небольшими, но эта разница будет увеличиваться по мере увеличения количества элементов CSS.

Примечание: Время загрузки файлов может меняться при каждой перезагрузке, но между ними все равно будет разница.

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;
}