CSS Nedir ve Neden Kullanmalısınız?

CSS, açılımıyla basamaklı stil sayfaları (cascading style sheets), bir web sayfasının nasıl göründüğünü belirleyen dildir. Yazı tipi, renk, boşluk, hizalama, düzen ve ekran boyutuna göre değişen davranışlar CSS ile tanımlanır.

HTML ve JavaScript ile birlikte web'in üç temel teknolojisinden biridir. Aralarındaki iş bölümü şöyle özetlenebilir: HTML sayfanın ne söylediğini, CSS nasıl göründüğünü, JavaScript ise ne yaptığını tanımlar.

HTML bir biçimlendirme dilidir ve sayfanın yapısını taşır: bu bir başlık, bu bir paragraf, bu bir liste, bu bir bağlantı. Anlamı tanımlar, görünümü değil.

CSS ise o öğelerin nasıl sunulacağını tanımlar. Aynı HTML belgesi, farklı bir CSS dosyasıyla tamamen başka bir siteye benzeyebilir — içeriğin tek bir karakterine dokunmadan.

Bu ayrım bilinçlidir ve pratik bir amaca hizmet eder: içerik ile sunum ayrı tutulduğunda, tasarım değişikliği metne dokunmadan yapılabilir. Metin ekibi ile tasarım ekibi birbirini beklemeden çalışabilir.

CSS, seçici ve kural mantığıyla işler. Bir seçici sayfadaki hangi öğelerden söz edildiğini belirtir; kural o öğelere ne olacağını söyler. "Tüm ana başlıklar şu boyutta ve şu renkte olsun" gibi.

"Basamaklı" kelimesi de buradan gelir. Aynı öğeye birden çok kural uygulanabilir ve hangisinin geçerli olacağı belirli bir öncelik sırasına göre çözülür: daha özel bir seçici, daha genel olanı geçersiz kılar.

Bu davranış CSS'i güçlü kılan şeydir ama aynı zamanda dağınık kurulmuş projelerde kafa karışıklığının kaynağıdır. Bir rengin neden değişmediğini anlamaya çalışan herkes bu mekanizmayla tanışmıştır.

CSS'in faydası "sayfayı güzelleştirmek" değildir; asıl kazanç ölçek ve bakımdadır.

• Tek kaynaktan yönetim. Tek bir stil dosyası yüzlerce sayfayı aynı anda değiştirebilir. Kurumsal kimlik güncellendiğinde her sayfayı tek tek düzenlemek gerekmez.
• Tekrarın azalması. Ortak kurallar bir kez yazılır. Aynı tipteki tüm ürün sayfaları için tek bir kural seti yeterlidir.
• Cihaza göre uyum. Aynı içeriğin telefonda, tablette ve masaüstünde farklı düzenlerde görünmesini sağlayan katman CSS'tir.
• Önbellekleme. Stil dosyası bir kez indirildikten sonra tarayıcı tarafından saklanır; sonraki sayfalarda yeniden indirilmez.

Etkiler, ama iki yönlü.

Olumlu tarafı yukarıda: ortak kuralları tek dosyada toplamak tekrar eden kodu azaltır ve önbelleklemeyi mümkün kılar.

Olumsuz tarafı ise şu: gereğinden büyük, yıllar içinde birikmiş ve büyük bölümü artık kullanılmayan bir stil dosyası, sayfanın görünür hale gelmesini geciktirir. Tarayıcı stil dosyasını indirip işlemeden içeriği çizmeye başlamaz.

Yani belirleyici olan CSS'in varlığı değil, ne kadar düzenli tutulduğudur. Sayfa hızı ve kullanılabilirlik arasındaki ilişkiye ayrı bir yazıda değindik.

CSS teknik bir konu ama bir yönetim sonucu var ve çoğu zaman fark edilmiyor.

İyi kurulmuş bir stil katmanında değişiklik ucuzdur. "Tüm düğmelerin rengini değiştirelim" talebi tek bir yerde çözülür. Dağınık kurulmuş bir projede ise aynı talep, kimin hangi sayfada ne yazdığını bulmakla geçen bir işe dönüşür.

Bu yüzden ajansınız "stil katmanının yeniden yazılması gerekiyor" dediğinde, bunu bir metin düzeltmesiyle aynı kefeye koymayın. Söylenen şey genellikle şudur: sonraki her küçük talep, bugünkü yapı yüzünden pahalıya gelecek.

Aynı mantık yeni bir proje başlatırken de geçerli. Bir sitenin ilk günkü görünümü kadar, iki yıl sonra nasıl güncelleneceği de bir tasarım kararıdır. Kurumsal projelerde bunu nasıl ele aldığımızı kurumsal web hizmet sayfamızda anlattık.

Site sahibi ya da pazarlama tarafındaysanız hayır, öğrenmeniz gerekmez.

Ne olduğunu bilmek yeterli: hangi taleplerin ucuz, hangilerinin pahalı olduğunu anlamanızı sağlar. Metin değişikliği ucuzdur, düzen değişikliği orta, stil katmanının yeniden kurulması pahalıdır.

Geliştirici tarafındaysanız cevap değişir. CSS yüzeyde basit görünen ama derinliği olan bir konudur; özellikle düzen sistemleri ve öncelik kuralları, yüzeysel bilgiyle uzun süre idare edilemez.