CSS'te bazı özellikler birim gerektirmeyen saf sayı değerleri kabul eder. Bu "unitless numbers" kavramı, CSS'in temel mekaniklerinden biridir.

Özellik	Unitless kabul eder mi?	Örnek	Açıklama
line-height	✔	line-height: 1.4;	Font yüksekliği ile çarpılan oran.
z-index	✔	z-index: 10;	Katman sırası.
opacity	✔	opacity: 0.6;	0–1 arasında saydamlık oranı.
font-weight	✔	font-weight: 700;	100–900 arası kalınlık.
flex-grow	✔	flex-grow: 2;	Elemanın büyüme oranı.
flex-shrink	✔	flex-shrink: 0;	Elemanın küçülme oranı.
flex (kısa kullanım)	✔ (ilk 2 değer)	flex: 1 0 auto;	İlk iki değer (grow/shrink) unitless’tır.
animation-iteration-count	✔	animation-iteration-count: 3;	Tekrar sayısı.
grid-row / grid-column (span)	✔	grid-column: span 3;	Kaç hücre genişleyeceğini belirleyen unitless sayı.
order	✔	order: 2;	Flex/Grid sıralaması için saf sayı.
line-clamp	✔	line-clamp: 3;	Kaç satır gösterileceği.
orphans	✔	orphans: 2;	Sayfa bölünmesinde minimum satır.
widows	✔	widows: 2;	Sayfa bölünmesinde maksimum satır.

Unitless Numbers Kullanan CSS Özellikleri

1. line-height (En Önemli Kullanım)

/* ❌ Birimli - KÖTÜ UYGULAMA */
p {
  font-size: 16px;
  line-height: 24px; /* Sabit değer */
}

/* ❌ Yüzde - Şaşırtıcı davranış */
p {
  font-size: 16px;
  line-height: 150%; /* = 24px olarak hesaplanır ve KALSALAŞıR */
}

/* ✅ Unitless - EN İYİ UYGULAMA */
p {
  font-size: 16px;
  line-height: 1.5; /* Font-size'ın 1.5 katı = 24px */
}

Line-height'ta Unitless Neden Kritik?

/* Miras davranışını görelim */
.parent {
  font-size: 16px;
  line-height: 24px; /* Sabit değer */
}

.child {
  font-size: 32px;
  /* line-height: 24px kalır - SORUN! */
  /* Metin üst üste biner */
}

/* Yüzde ile */
.parent {
  font-size: 16px;
  line-height: 150%; /* = 24px hesaplanır ve bu değer miras alınır */
}

.child {
  font-size: 32px;
  /* line-height: 24px (parent'tan miras) - SORUN! */
}

/* ✅ Unitless ile - ÇÖZÜM */
.parent {
  font-size: 16px;
  line-height: 1.5; /* Oran miras alınır, değer değil */
}

.child {
  font-size: 32px;
  /* line-height: 1.5 oranı miras alınır */
  /* = 32px * 1.5 = 48px - DOĞRU! */
}

Kural: line-height için DAIMA unitless kullan!

Pratik Line-height Değerleri

/* Genel kurallar */
body {
  line-height: 1.6; /* Paragraf metinleri için ideal */
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2; /* Başlıklar için sıkı */
}

.small-text {
  line-height: 1.4; /* Küçük metinler için */
}

.code {
  line-height: 1.6; /* Kod blokları için */
}

.button {
  line-height: 1; /* Tek satır butonlar için */
}

.loose-text {
  line-height: 1.8; /* Geniş satır aralığı */
}

2. opacity (Şeffaflık)

.element {
  opacity: 0;    /* Tamamen şeffaf */
  opacity: 0.5;  /* %50 şeffaf */
  opacity: 1;    /* Tamamen opak */
}

/* ❌ Birim kullanılamaz */
opacity: 50%;   /* Geçersiz (bazı tarayıcılar destekler ama standart değil) */
opacity: 0.5px; /* Geçersiz */

/* Pratik kullanım */
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hover-effect {
  opacity: 1;
  transition: opacity 0.3s;
}

.hover-effect:hover {
  opacity: 0.8;
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

3. z-index (Katman Sırası)

.element {
  position: relative;
  z-index: 10; /* Unitless integer */
}

/* ❌ Birim kullanılamaz */
z-index: 10px;  /* Geçersiz */
z-index: 1.5;   /* Çalışır ama tam sayı olmalı */

4. flex-grow, flex-shrink, flex-basis (flex'te 0 hariç)

/* flex-grow - Unitless */
.item {
  flex-grow: 1; /* Boş alanı eşit paylaş */
  flex-grow: 2; /* 2 kat daha fazla alan al */
}

/* flex-shrink - Unitless */
.item {
  flex-shrink: 1; /* Normal küçülme */
  flex-shrink: 0; /* Hiç küçülme */
}

/* flex kısaltması */
.item {
  flex: 1; /* flex: 1 1 0 anlamına gelir */
  /*     grow shrink basis */
}

/* Pratik flex kullanımı */
.container {
  display: flex;
}

.sidebar {
  flex: 0 0 250px; /* Büyümez, küçülmez, 250px sabit */
}

.content {
  flex: 1; /* Kalan alanı kaplar */
}

.priority-item {
  flex-grow: 2; /* Diğerlerinden 2x daha fazla büyür */
}

5. order (Flex/Grid Sırası)

.flex-item {
  order: 0;  /* Varsayılan */
  order: 1;  /* Sona gider */
  order: -1; /* Başa gider */
}

/* ❌ Birim kullanılamaz */
order: 1px; /* Geçersiz */

/* Responsive sıralama */
.mobile-first {
  order: -1; /* Mobilde en üstte */
}

@media (min-width: 768px) {
  .mobile-first {
    order: 0; /* Desktop'ta normal sırada */
  }
}

6. font-weight (Yazı Kalınlığı)

.element {
  font-weight: 400; /* Normal - unitless */
  font-weight: 700; /* Bold - unitless */
}

/* İsimli değerler de kullanılabilir */
font-weight: normal;  /* = 400 */
font-weight: bold;    /* = 700 */
font-weight: lighter; /* Parent'tan daha ince */
font-weight: bolder;  /* Parent'tan daha kalın */

/* Variable fonts ile */
@font-face {
  font-family: 'Inter';
  src: url('inter-variable.woff2');
  font-weight: 100 900; /* Desteklenen aralık */
}

.heading {
  font-weight: 650; /* Özel değer - variable font gerekir */
}

7. column-count (Çok Kolonlu Düzen)

.article {
  column-count: 3; /* 3 kolon - unitless */
}

/* ❌ Birim kullanılamaz */
column-count: 3px; /* Geçersiz */

/* Responsive kolonlar */
.masonry {
  column-count: 1;
}

@media (min-width: 768px) {
  .masonry {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  .masonry {
    column-count: 3;
  }
}

8. Animation ve Transform'da Unitless

/* animation-iteration-count */
.element {
  animation: spin 2s infinite; /* infinite = unitless */
  animation-iteration-count: 3; /* 3 kez - unitless */
}

/* ❌ Birim kullanılamaz */
animation-iteration-count: 3px; /* Geçersiz */

/* transform: scale() */
.element {
  transform: scale(1.5); /* 1.5 katı - unitless */
  transform: scale(2);   /* 2 katı */
  transform: scale(0.5); /* Yarısı */
  
  /* İki eksende farklı */
  transform: scale(2, 1.5); /* X: 2x, Y: 1.5x */
}

/* transform: rotate() için derece GEREKIR */
transform: rotate(45deg);  /* ✅ Doğru */
transform: rotate(45);     /* ❌ Geçersiz */

Unitless vs Birimli - Karşılaştırma

Line-height Detaylı Karşılaştırma

/* Senaryo 1: Sabit değer (px) */
.parent-px {
  font-size: 16px;
  line-height: 24px;
}

.child-px {
  font-size: 20px;
  /* line-height: 24px miras alınır */
  /* 20px font için 24px satır yüksekliği = sıkışık */
}

/* Senaryo 2: Yüzde */
.parent-percent {
  font-size: 16px;
  line-height: 150%; /* = 24px olarak HESAPLANIR */
}

.child-percent {
  font-size: 20px;
  /* line-height: 24px (hesaplanmış değer) miras alınır */
  /* Yine sorunlu! */
}

/* Senaryo 3: Em birimi */
.parent-em {
  font-size: 16px;
  line-height: 1.5em; /* = 24px olarak HESAPLANIR */
}

.child-em {
  font-size: 20px;
  /* line-height: 24px miras alınır */
  /* Aynı sorun! */
}

/* Senaryo 4: Unitless ✅ */
.parent-unitless {
  font-size: 16px;
  line-height: 1.5; /* ORAN miras alınır */
}

.child-unitless {
  font-size: 20px;
  /* line-height: 1.5 ORANI miras alınır */
  /* = 20px * 1.5 = 30px - DOĞRU! */
}

Unitless Numbers Kullanırken Dikkat Edilmesi Gerekenler

1. Line-height ile Calc Kullanımı

/* ⚠️ Dikkatli ol */
.element {
  font-size: 16px;
  line-height: calc(1.5 + 0.2); /* = 1.7 - Unitless kalır ✅ */
  line-height: calc(1.5 * 16px); /* = 24px - Birimli olur ❌ */
}

/* ✅ Doğru kullanım */
.element {
  --line-height-base: 1.5;
  --line-height-adjust: 0.2;
  
  line-height: calc(var(--line-height-base) + var(--line-height-adjust));
  /* Sonuç unitless kalır */
}

Özet

Unitless numbers CSS'in önemli bir konsepti ve belirli özellikler için zorunlu veya önerilen kullanım:

Zorunlu unitless:

• opacity (0-1)
• z-index (integer)
• flex-grow / flex-shrink
• order
• column-count
• font-weight (100-900)
• animation-iteration-count
• transform: scale()
• aspect-ratio

Şiddetle önerilen unitless:

• line-height (miras davranışı için kritik)

Anahtar avantaj: Özellikle line-height için unitless kullanım, miras mekanizmasının doğru çalışmasını sağlar ve responsive tasarımda beklenmedik sorunları önler.

Modern web tasarımında unitless numbers, temiz, maintainable ve tahmin edilebilir kod yazmak için temel taşlardan biridir!