Shorthand CSS vs Longhand CSS

Shorthand CSS Nedir?

Shorthand CSS, stil dosyaları yazılırken CSS elementlerinin minimum kod ile oluşturulmasıdır.

Longhand CSS Nedir?

Longhand CSS, stil dosyaları yazılırken CSS elementlerinin uzun uzun kodlarla oluşturulmasıdır.

Shorthand CSS vs Longhand CSS

Shorthand CSS kullanımında yük sayısı azaltılır ve tarayıcının yükleyeceği yük sayısı da azalacağı için performansa olumlu yönde katkısı olur.

Örnek olarak bir HTML elementine margin özelliği verilirken margin-top: 5px, margin-right: 6px, margin-bottom: 7px, margin-left: 8px; şeklinde her bir köşe ayrı CSS özellikleriyle tanımlanabilir fakat bunun yerine margin: 5px 6px 7px 8px; şeklinde daha kısa bir kullanım mevcuttur ve bu kısa olan kullanım daha performanslıdır.

Birkaç CSS kodunun kısaltılarak kullanılmış olması büyük tasarruf olarak görülmeyebilir fakat stil dosyası elementlerinin miktarı arttıkça fark ortaya çıkacaktır.

Aşağıdaki görselde basit bir testle fark ortaya çıkıyor, 2 farklı CSS dosyasından biri kısa yazılmış stil dosyası (shorthand.css) iken, diğer uzun yazılmış stil dosyası (longhand.css).

Birebir aynı işlemi gören stil dosyalarından shorthand.css 238B iken longhand.css 567B alan kaplıyor. Kısa yazılmış CSS dosyası 16ms’de yüklenirken uzun yazılmış CSS dosyası 20ms’de yükleniyor. Örnekteki dosya boyutları küçük olabilir fakat CSS elementlerinin sayısı arttıkça bu fark da artacaktır.

Not: Her yeniden yükleme esnasında dosyaların yüklenme süreleri değişebilir fakat aralarında yine de fark olacaktır.

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