CSS (.css) nedir?
CSS, yani Cascading Style Sheets, web sayfalarının görünümünü ve düzenini tanımlayan bir stil dilidir. .css uzantılı dosyalar; renkler, tipografi, boşluklar, ızgara ve esnek yerleşim gibi görsel kuralları barındırır. HTML yapılandırmayı, CSS ise sunumu üstlenerek içerik ve tasarımın ayrılmasını sağlar. Bu yaklaşım performansı artırır, bakımı kolaylaştırır ve yeniden kullanılabilir tasarım bileşenleri oluşturmanıza yardımcı olur.
Temel özellikler
- Katmanlı yapı ve özgüllük: Kurallar kaskat mantığıyla uygulanır; özgüllük ve kaynak sırası hangi stilin geçerli olacağını belirler.
- Tepkisel tasarım: Medya sorguları ile farklı ekran boyutlarına uyum sağlayan düzenler kurabilirsiniz.
- Modülerlik: BEM, OOCSS gibi metodolojilerle yeniden kullanılabilir sınıflar ve bileşenler oluşturulur.
- Performans: Dış stil sayfaları önbelleğe alınır; küçültme ve birleştirme teknikleri yükleme süresini azaltır.
Kullanım alanları
- Kurumsal web siteleri, bloglar ve e-ticaret arayüzleri
- Web uygulamaları ve SPA çerçevelerinin bileşen stilleri
- Mobil web ve PWA arayüzleri
- E-posta şablonlarında temel stil kuralları
Desteklenen platformlar ve uyumluluk
CSS tüm modern tarayıcılarda desteklenir ve platformdan bağımsızdır. Windows, macOS, Linux, Android ve iOS üzerinde çalışan tarayıcılar .css dosyalarını işler. Güncel özellikler için Tarayıcı Uyumluluk tablolarını ve gerektiğinde satıcı öneklerini kullanın.
CSS dosyası nasıl açılır ve düzenlenir?
.css dosyaları metin tabanlıdır ve herhangi bir editörle açılıp düzenlenebilir. Visual Studio Code, WebStorm, Sublime Text, Notepad++ ve Adobe Dreamweaver sık kullanılan araçlardır. Sözdizimi renklendirme, otomatik tamamlama, linting ve canlı sunucu eklentileri üretkenliği artırır.
Dönüştürme ve çıktı seçenekleri
CSS başka bir biçime doğrudan dönüştürülmez; ancak üretim için küçültülmüş .min.css dosyaları oluşturulabilir. SASS SCSS ve LESS gibi önişlemcilerden CSS derlenir. CSS-in-JS, PostCSS ve paketleyicilerle modüler yapı ve otomasyon sağlanır. Kaynak haritaları, hata ayıklamayı kolaylaştırır.
İpuçları ve en iyi uygulamalar
- Stilleri anlamlı dosyalara bölün; bileşen odaklı mimari benimseyin.
- Kod standartları, lint kuralları ve biçimlendirici ile tutarlılık sağlayın.
- Autoprefixer kullanın, gereksiz kuralları temizleyin ve üretimde minify edin.
- W3C CSS Validator ile doğrulama yapın; sürüm kontrolü ve CI adımlarına dahil edin.