CSS kullanırken birçok bilindik hata ile karşılaşabiliyoruz. Sıkça karşılaştığımız bu hatalar tasarımını yaptığımız web sitelerinin farklı donanım ve cihazlarda farklı sorunlar yaşamasına sebep olabiliyor. En sık karşılaşılan ve yaygın olarak hatalı kodlanan durumlardan birkaçına göz atacağız. Hadi başlayalım:
1- Yedek Yazı Tipleri Kullanın:
CSS’te sık yapılan bir hata, kullanıcının bilgisayarında bulunmayan özel yazı tiplerini kullanmaktır. Bu durumda tarayıcılar genellikle yedek yazı tipi kullanarak bu eksikliği giderir.
Yani tasarımınızı herkesin doğru şekilde görebilmesi için en iyi uygulama kullanıcıların bilgisayarlarında bulunan yaygın kullanılan yazı tiplerini tercih etmektir.
2- Her Yerde “px” Kullanmak Hatalıdır:
Piksel (px) birimi, öğelerin boyutunu belirlemek için mutlak bir değerdir. Yani piksel birimini kullanırsanız, bir öğenin boyutunu belirli bir piksel sayısı olarak belirlersiniz ve her kullanıcı aynı piksel sayısını görecektir. Bu nedenle, kullanıcıların farklı monitör ekran boyutlarına sahip olması durumunda, öğelerin görsel olarak tutarlı görünmesi mümkün olmayabilir.
Öte yandan, “rem” ve “em” gibi göreceli birimler, öğelerin boyutunu bağıl olarak belirler. “rem” birimi, kök (root) elementin (genellikle <html> etiketi) boyutunu temel alırken, “em” birimi, öğenin doğrudan üst öğesinin boyutunu temel alır. Bu göreceli birimler, kullanıcının tarayıcı penceresi veya cihazının ekran boyutu gibi faktörlere göre otomatik olarak ölçeklenir.
Bu nedenle göreceli birimler kullanarak tasarımınızın daha duyarlı olmasını ve farklı ekran boyutlarına sahip kullanıcılara uyum sağlamasını sağlayabilirsiniz.
3- Aynı Kodları Tekrarlamayın:
CSS’te, aynı stil özelliklerine sahip birden çok öğe varsa aynı stil kurallarını tekrar tekrar yazmak yerine seçicileri gruplayarak kodunuzu optimize edebilirsiniz. Gruplama yapmak kodunuzun daha temiz, okunabilir ve daha sürdürülebilir olmasını sağlar.
4- Kısaltmaları Kullanın:
CSS’te bazı stil özelliklerini tek bir kısaltma özelliğiyle belirleyebilirsiniz. Örneğin padding, margin ve background gibi diğer birçok özellik için kısaltmalar bulunmaktadır.
5- !important Kullanımını Sıklaştırmamalıyız:
!important özelliğini mümkün olduğunca az kullanmak ve yalnızca gerekli durumlarda başvurmak önemlidir. CSS’te stil önceliğini doğru bir şekilde yönetmek ve stil kurallarını anlaşılır ve bakımı kolay bir şekilde tutmak önemlidir. !important özelliği, önceden belirlenmiş stil kurallarını geçersiz kılmak için son çare olarak kullanılmalı ve doğru önceliklendirme teknikleri tercih edilmelidir.
Not: Bu yazı, JavaScript Mastery isimli youtube kanalına ait bir pdf’ten çevirilmiştir.
Bir yanıt yazın