Minimum CSS ile Düzgün Bir Site Yapmak (2023)

(thecascade.dev)

6 puan yazan GN⁺ 2025-10-07 | 1 yorum | WhatsApp'ta paylaş

Birçok geliştirici CSS tasarımını gereğinden fazla karmaşıklaştırdığı için gereksiz sorunlar yaşıyor
Yalnızca asgari düzeyde global stil ile bile yeterince temiz ve responsive sayfalar oluşturmak mümkün
Görsel, SVG ve video öğelerinde boyutu sınırlayıp blok olarak göstermek, temel yerleşim sorunlarını çözebilir
system-ui yazı tipi ile uygun satır aralığı ve maksimum paragraf genişliği sınırı, okunabilirliği artırabilir
İşletim sisteminin karanlık mod gibi tercihlerini yansıtmak için color-scheme özelliğini uygulamak gerekir

Minimum CSS ile Düzgün Bir Site Yapmak

Aşırı CSS sorunu ve yaklaşım

Birçok kişi web sitesi yaparken CSS yapısını gereğinden fazla karmaşık kuruyor
Oysa yalnızca minimum düzeyde CSS ile de yeterince şık ve temele sadık responsive sayfalar üretmek mümkün

Temel HTML ve görsel uyumluluğu

Yalnızca temel HTML yazılsa bile site temel seviyede responsive davranır
Ancak görseller nedeniyle yerleşimde overflow sorunları oluşabileceğinden aşağıdaki CSS uygulanır
```
img {
  max-width: 100%;
  display: block;
}
```
SVG ve video öğelerinde benzer sorunlar görülürse, aşağıdaki gibi genişletilebilir
```
img,
svg,
video {
  max-width: 100%;
  display: block;
}
```

Tipografiyi iyileştirme

Tarayıcının varsayılan yazı tipi tasarım açısından sıradan görünebilir
Yazı tipi ailesi olarak system-ui kullanıldığında her platforma uygun varsayılan yazı tipi uygulanabilir
Varsayılan yazı boyutu ve satır aralığı biraz küçük kalma eğiliminde olduğundan aşağıdaki ayarlar önerilir
```
body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}
```
Yalnızca bu ayar bile tarayıcı varsayılanlarına kıyasla büyük bir iyileşme sağlar

Karanlık mod desteği

Birçok kullanıcı karanlık modu tercih ettiğinden, işletim sistemi ayarını izleyen color-scheme özelliğini kullanmak faydalıdır
```
html {
  color-scheme: light dark;
}
```
Bu özellik, user agent stillerinin sistemin tercih ettiği temayı otomatik olarak yansıtmasını sağlar

HTML etiketi özniteliği olarak da belirtilebilir

<html lang="en" color-scheme="light dark"></html>

Yalnızca sistem tercihini izlemek değil, renk şemasını doğrudan seçebilme imkanı sunmak da iyi bir best practice'tir

İçerik genişliğini sınırlama

İçerik paragraflarının uzunluğu, okunabilirlik üzerinde büyük etkisi olan önemli bir unsurdur
Genellikle gövde metninin satır başına 45 ila 90 karakter olacak şekilde ayarlanması idealdir
Aşağıdaki gibi main öğesinin maksimum genişliği sınırlandığında paragraf okunabilirliği artırılabilir
```
main {
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}
```
min() fonksiyonu, 70ch ile 100% - 4rem değerlerinden küçük olanı seçer
margin-inline: auto ile yatayda ortalama sağlanır
Gerektiğinde main yerine .container veya .wrapper sınıfı kullanılarak da uygulanabilir

Son minimum CSS örneği

Yukarıdakilerin tümünü bir araya getirdiğinizde, aşağıdaki minimum CSS setiyle sağlam bir site kurulabilir

html {
  color-scheme: light dark;
}

body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

main {
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}

Kapanış ve genişletilebilirlik

Yukarıdaki örnek hafif bir başlangıç noktası veya küçük sayfalar için hemen kullanılabilir
Çoğu durumda bunun üzerine ek stiller ekleyerek genişletmek en uygun yaklaşımdır

1 yorum

GN⁺ 2025-10-07

Hacker News görüşleri

Eski bir yazı ama bazı bölgelerde neden system ui font family kullanımının hâlâ önerilmediğini açıklayan geçerli noktalar içeriyor
https://infinnie.github.io/blog/2017/systemui.html
- Yazı ilginçti ama fonttaki st ligatürü o kadar çirkin görünüyor ki o siteden font tavsiyesi almak istemem
Dürüst olmak gerekirse pek anlamıyorum. Okunması kolay, minimalist bir web sayfası yapmak istemelerini anlıyorum. Ama bunun için gereken yöntemler zaten epey iyi bilinen şeyler değil mi? Bununla zorlanan hedef kitlenin kim olduğunu merak ediyorum. Bunun HN'de neden bu kadar popüler olduğuna da şaşırıyorum
- Benim. Ben ağırlıklı olarak backend geliştiricisiyim ve yan projelerimde ara sıra frontend de yapıyorum ama CSS hakkında neredeyse hiçbir şey bilmiyorum. Bana göre bunlar “iyi bilinen” yöntemler değil. CSS bilmediğim için her seferinde zorlanıyorum
- Sadece bir max-width ile zorlanan insanlar mı? Hedef kitle kişisel ana sayfa yapan herkes

font-family: System UI;

Bu yanlış. Doğru sözdizimi şu:

font-family: system-ui;

Yazar bunu bazı örneklerde doğru yazmış ama ilk örnekte yanlış kullandığı için kafa karıştırabilir

Font adı iki kelimeden oluşuyorsa çift tırnak içine almak gerekip gerekmediğini merak ediyorum. Mesela

font-family: Times New Roman;

bunun gibi. Hem times hem de Times New Roman tırnaksız düzgün çalıştığına göre, bunun eski bir font olduğu için özel muamele görmesinden mi yoksa CSS'in isim eşleştirmede esnek davranmasından mı kaynaklandığını merak ediyorum

https://meyerweb.com/eric/tools/css/reset/
Buna düpedüz nakit para demek istiyorum
- Eric Meyer CSS dünyasının efsanelerindendir. 2002'de box model'i anlayamadığımda onun açıklaması sayesinde kavramıştım
  https://meyerweb.com/eric/books/
- Bunu sık sık gördüm ama gözüme bir türlü oturmayan garip bir hissi var. Yeterince sade değil, modern/minimal de görünmüyor. Yazının kendisi de pek okunaklı gelmiyor. Belki sadece benim zevkimdir
- CSS reset stilleri, stil kirliliğinin başlangıç noktası. Kevin Powell tarzı yaklaşım, yani tarayıcının varsayılan stillerine saygı duymak, daha iyi. Tarayıcılar arası test elbette gerekiyor ama neredeyse 20 yıldır CSS reset'ler temelmiş gibi kullanılıyor, üstüne bir de framework eklenince karmaşıklık durmadan artıyor. Artık modern CSS Grid, değişkenler vb. ile eski yaklaşımlardan çıkıp çok daha yaratıcı çözümler üretmek mümkün. Eskiden türlü hile hurdayla uğraşmaktan CSS'ten nefret ederdim ama artık tam oturan Lego parçalarıyla uğraşıyormuşum gibi geliyor. CSS reset artık zorunlu bir ihtiyaç değil, korkuyu aşmaya yardımcı bir araç. CSS pre-processor'lara da artık pek ihtiyaç yok
Bu, sade akademik tarzda minimalist bir site için SSG(static site generator) önerisi isteyen bir soru. Astro ve Hugo seçenekler arasında ama Astro fazla karmaşık gelmiş, doğrudan html/css yazmak ise yerleşim ve özelleştirme açısından zahmetli. Astro temaları da kişisel blog için pek uygun görünmüyor; çoğu kurumsal ya da gösterişli. Bunları düşünürken web sitesi tasarlamanın neden bu kadar zorlaştığına yeniden şaşırıyor insan. Framework'ler, bileşenler ve sayısız bağımlılıkla web geliştiricilerin bu tempoya nasıl ayak uydurduğunu merak ediyorum
- Eleventy(https://11ty.dev/) veya Zola(https://getzola.org/) öneririm. İkisi de nispeten yeni araçlar ve ikisinin de çok yetkin kullanıcıları var
- Bu, web sistemlerinin doğal karmaşıklığı. Sadelik kalıcı olamaz. Yine de lisans gerektirmeyen açık standartlara ve framework'lere minnettarım. Seçenek o kadar fazla ki insan seçim felci yaşıyor
- Bu tartışmanın kendisi modern web'in utancını gizliyor. Facebook gibi büyük web servisleri dışında neredeyse değerli hiçbir şey kalmadığı için utanılacak bir durum var
- Daha fazla seçeneğe ihtiyacınız olmayabilir ama franklin.jl matematik, satır içi kod işleme ve sadelik açısından bana çok uygun geldi
Bu sitenin kendisi yazıda önerilenden çok daha fazla CSS kullanıyor. Kabaca 300 satırdan fazla. Yine de temel bir başlangıç çizgisi vermek açısından fena değil
- Bunu mobilde kontrol ettiğin için teşekkürler. Bu bilgi yayın organına olan güvenimi biraz azaltıyor. Sonra kendim de kontrol edeceğim. Yine de anlattıkları teknikleri iyi uygulamış olmalarını umuyorum
“Okunabilirlik için içerik genişliğini sınırlayalım” önerisini görünce, keşke bunu yapmasalar dedim. Kullanılabilirlik araştırmaları ne derse desin ben geniş bir alanı tercih ediyorum. Tarayıcı boyutunu değiştirerek içerik genişliği zaten kontrol edilebilir
- Tarayıcıyı yeniden boyutlandırınca tüm pencere daralıyor ve bu da işleri daha da kullanışsız hale getiriyor. Örneğin solda duran 80 sütunluk bir metni ortaya almak için tarayıcı boyutuyla sürekli oynamak gerekiyor ve bu çok uğraştırıcı. Hatta bazen o kadar rahatsız edici oluyor ki sitenin stil dosyasını kendim ezdiğim oluyor. Bazen düz metin görmek daha iyi geliyor. Ya da reader mode'a geçip öyle okuyorum
- Tanıdığım neredeyse herkes, teknik olsun olmasın, sürekli tonla sekme açık tutuyor. Bu sekmelerin hepsinin yalnızca tek satırlık metinden oluşma ihtimali %0. Her seferinde pencere boyutunu ayarlamaktansa nokta vuruşlu yazıcıdan çıktı alıp okumak daha mantıklıymış gibi geliyor. Biraz abartıyorum tabii
- Düz yazı türü içeriklerde genişliğin sınırlı olması tercih edilir. Geniş ekranlarda satırın sonuna kadar göz gezdirerek okumak yorucu oluyor
- Bu yorumun en çok oy alan yorum olması, HN'deki tavsiyeleri fazla ciddiye almamak gerektiğini de gösteriyor
- İçerik genişliğini sınırlamak kendi başına sorun değil. Ama content-width, büyük font ve satır yüksekliğinin aşırı kullanımı can sıkıcı. Bugünlerde birçok site aşırı büyük yazı tipi ve geniş satır aralığı kullandığı için gereksiz yere fazla kaydırma yaptırıyor. Tarayıcının varsayılan font boyutu sistem için zaten uygun; font boyutunu olduğu gibi bırakıp yakınlaştırmayı kullanıcıya bırakmak daha iyi
Yazıyı okumadan bile cevap açık. Doğru sayı 0
- Özellikle görseller konusunda varsayılan stiller mobilde çok kullanışsız. Yazının dediği gibi “oldukça iyi görünen” bir şey istiyorsanız varsayılanların yeterli olduğunu düşünmüyorum
- Tarayıcının varsayılanı serif'tir
CSS reset ile hâlâ bir miktar temel hizalama yapmak gerekiyor. Son 5 yıl içindeki tarayıcıları hedefliyorsanız sadeleştirilmiş popüler bir reset fazlasıyla yeterli
- Asıl mesele stil birliği değil, okunabilir bir temel çizgi oluşturmak. Farklı platform ve tarayıcılarda biraz farklı görünmesi sorun değil; yeter ki rahat okunabilsin. Estetik kusursuzluktan çok temel kullanılabilirliğe odaklanmak daha pratik
- reset gereğinden fazla abartılıyor. Kişisel blog gibi minimalist kullanım senaryolarında platformlar arasında stilin biraz farklı olması büyük sorun değil. Bu daha çok tasarımcı içgüdüsünün her şeyi takıntılı biçimde eşitleme isteğinden geliyor

img { max-width: 100%; }
Bu ayar mutlaka height: auto ile birlikte kullanılmalı. Aksi halde görselin oranı bozulur
img, svg, video { max-width: 100%; }
Chrome 141'de iç içe geçmiş SVG öğelerinde width/height sorunu yüzünden auto hesabı hatalı oluyor. Geçici olarak
svg:where(:not(svg svg)) kullanmak gerekiyor
system-ui fontu basit bir sans-serif alternatifi değildir. Sistem UI fontunu içerik metninde kullanmak, bazı OS/dil kombinasyonlarında neredeyse okunamayacak kadar rahatsız edici olabilir. sans-serif gerekiyorsa sans-serif kullanılmalı
Varsayılan font boyutu biraz küçük kalıyor; 18~20px (1.25rem) civarı uygun. Ama küçük ekranlarda 1rem üstüne çıkmamak daha iyi
Varsayılan line-height için 1.5~1.7 öneriliyor ama 1.7 küçük ekranlarda fazla geniş. 1.4~1.5 daha uygun ve ekran boyutuna göre 1.4~1.6 arasında ayarlanabilir
font-family: System UI;
Bu açık bir sözdizimi hatası. Stil dosyasını doğrulasanız hemen görülür
Koyu/açık sistem teması ile web temasını ayırmak iyi bir fikir. Firefox varsayılan olarak içeriğin sistem temasını izlemesini sağlar ve ayrıca bunu ayarlamak da mümkündür
main { max-width: min(70ch, 100% - 4rem); margin-inline: auto; }
Bu en az 2rem kadar kenar boşluğu demek oluyor (varsayılan body margin'i ile birlikte 2rem+8px). Boşluk fazla ve uygulandığı yer de tuhaf. Bunu main üzerinde kullanacaksanız

main {
  max-width: 70ch;
  padding-inline: 2rem;
  margin-inline: auto;
}

gibi padding kullanmak daha mantıklı. Ama pratikte header ve footer için de aynı yatay boşluk gerektiğinden body margin'ini ayarlamak daha iyi

body {
  margin: 1rem;
}

main {
  max-width: 70ch;
  margin-inline: auto;
}

Böylece kenar boşluğu ~40px'ten 16px seviyesine indirilebilir

Gerçekte yerleşim ayarlarının ve ince ayarların çoğu media query ile çözülebilir. Bu durumda da sonuçta sıradan ama iyi yazılmış CSS ile kıyaslandığında kod pek de artmış olmuyor

Minimum CSS ile Düzgün Bir Site Yapmak (2023)