Basamaklı Stil Sayfaları (CSS) ile çalışmak yeni başlayanlar için zor olabilir. CSS kullanarak uygulamanızın görünümünü yapılandırabilir, güncelleyebilir ve bakımını yapabilirsiniz. Ancak dil, istenen düzeni elde etmek için HTML sayfalarını işleme becerisi gerektirir.
İşte CSS ile çalışırken kaçınılması gereken bazı hatalar. Size zaman kazandıracak ve geliştirme sürecinizi kolaylaştıracaklar.
1. Yazı Tipi Boyutları için px kullanma
"px" birimi pikselleri temsil eder. Bir web sayfasında bir öğenin genişlik ve yüksekliğinden yazı tipi boyutuna kadar çeşitli uzunlukları ifade etmek için kullanabilirsiniz.
Ancak px, tasarımınızı tüm ekranlar için sabit bir boyuta kilitler. Px'deki bir görüntü, bir ekranın tüm genişliğini ve diğerinin yalnızca küçük bir bölümünü kaplayabilir. Daha orantılı bir öğe istiyorsanız, göreli ölçümler kullan rem veya yüzdeler (%) gibi.
Kullanılacak en iyi göreli ölçüm rem'dir. Bu birim, bir okuyucunun genellikle tarayıcı ayarlarında ayarlayabileceği kök öğenin yazı tipi boyutunu ifade eder. Aşağıdaki örnekte px ve rem'in bir öğe üzerindeki etkisini görebilirsiniz:
html>
<HTML>
<KAFA>KAFA>
<vücut>
<h1>bu 1. başlıkh1>
<h2>bu 2. başlıkh2>
<P>Bu bir paragraf.P>
<P>Bu başka bir paragraf.P>
vücut>
html>Aşağıdaki CSS ile px birimlerini kullanarak bu belgedeki yazı tipi boyutlarını biçimlendirebilirsiniz:
h1 {
yazı Boyutu: 50piksel;
}h2 {
yazı Boyutu: 30piksel;
}
P {
yazı Boyutu: 15piksel;
}
Ortaya çıkan sayfa, büyük ekranda görüntülediğinizde kabul edilebilir görünüyor:
Ancak, telefondaki gibi daha küçük bir ekranda prezentabl görünmüyor:
Ardından, aynı içeriğe rem uygulayın. Aşağıda gösterildiği gibi, html öğesinde bir temel yazı tipi boyutu belirtin ve diğer öğeleri rems kullanarak boyutlandırın:
html {
yazı Boyutu: 16piksel;
}h1 {
yazı Boyutu: 3rem;
}h2 {
yazı Boyutu: 2rem;
}
P {
yazı Boyutu: 1rem;
}
Büyük ve küçük ekranlar arasındaki farka dikkat edin. rem ile içerik, ekran boyutundan bağımsız olarak daha iyi ölçeklenir. Öğeler, ayarlanan ekran boyutunu asla aşamaz. Bu nedenle piksel yerine göreli uzunlukları kullanmak daha iyidir.
Bir masaüstü ekranında:
Küçük bir ekranda, kalıcı birimlerdeki metin hala okunabilir:
2. Tüm Tarzlarınızı Tek Dosyaya Koymak
Büyük bir proje için tek bir CSS dosyası kullanmak ortalığı karıştırabilir. Güncelleme sırasında kafa karıştırıcı olacak uzun kod satırlarına sahip bir dosyanız olacak. Farklı bileşenler için CSS stil sayfaları için farklı dosyalar kullanmayı deneyin.
Örneğin, gezinme, üst bilgi ve alt bilgi için farklı dosyalarınız olabilir. Ve vücuttaki bölümler için bir tane daha. CSS dosyalarınızı ayırmak, Uygulamanızı yapılandırmanıza ve kod kullanılabilirliğini teşvik etmenize yardımcı olur.
3. Satır İçi CSS'yi Uygunsuz Şekilde Kullanmak
Vanilla CSS'de, HTML sayfalarında olduğu gibi stiller yazabilirsiniz. Bootstrap ve TailwindCSS gibi CSS çerçeveleri. Satır içi CSS, bir HTML öğesine benzersiz bir stil uygulamanıza olanak tanır. HTML öğesinin style özelliğini kullanır.
Aşağıdaki kod satır içi CSS örneğidir.
<h2stil="yeşil renk;">Bu bir Yeşil Başlıkh2>
<Pstil="kırmızı renk;">Bu kırmızı bir paragraftır.P>
Metin şu şekilde görünecektir:
Ancak, yalnızca satır içi CSS içeren HTML dağınık olabilir. CSS için başka bir konum olmadığından, tüm CSS, HTML ile aynı dosyada bulunur. Kalabalık görünecek. Böyle bir dosyayı düzenlemek zordur, özellikle de bu sizin kodunuz değilse.
Ayrıca, satır içi CSS ile her öğe için kod yazmanız gerekir. Bu, tekrarı artırır ve kodun yeniden kullanımını azaltır. Web sayfalarınızın stilini belirlemek için her zaman harici stil sayfaları ile satır içi CSS'nin bir kombinasyonunu kullanın.
4. Aşırı kullanım !önemli
CSS'de, !önemli kuralı bir özelliğe/değere daha fazla önem katar. Bu özellik için o öğedeki diğer stil kurallarını geçersiz kılar.
Sadece birkaçına sahip olmalısın !önemli kodunuzdaki kurallar. Sadece gerektiğinde kullanın. Kod yazıp sonra geçersiz kılmanın bir anlamı yok. Kodunuz dağınık görünecek ve bazı cihazlarda çalıştırıldığında sorunlara neden olacaktır.
html>
<html>
<KAFA>KAFA>
<vücut>
<P> ben turuncuyum P>
<Psınıf="sınıfım"> ben yeşilim P>
<PİD="benim kimliğim"> Ben maviyim. P>
vücut>
html>CSS:
#benim kimliğim {
arka plan rengi: mavi;
}.sınıfım {
arka plan rengi: yeşil;
}
P {
arka plan rengi: turuncu !önemli;
}
Sonuç şöyle:
5. Adlandırma Kurallarına Uymamak
CSS, geliştiricilere standart kodun nasıl yazılacağı konusunda rehberlik eden adlandırma kurallarına sahiptir. Eğer bitersen bu çok önemlidir CSS dosyasında hata ayıklama ileri bir tarihte.
Bu standartlardan biri, gruplandırılmış kelimeleri ayırmak için kısa çizgi kullanmayı içerir. Bir diğeri, bir seçiciyi yaptığı işe göre adlandırmaktır. Yani bakan kimse tahmin yürütmek zorunda kalmayacak. Ayrıca kodu okumayı, korumayı ve paylaşmayı kolaylaştırır. Örneğin:
Bunun yerine:
.resim1 { sol kenar boşluğu: 3%; }Şöyle yaz:
.boy-resmi { sol kenar boşluğu: 3%; }Stil sayfasına baktığınızda, kodun tam olarak hangi resim için olduğunu bileceksiniz. Google'ın HTML/CSS stil kılavuzu her geliştiricinin bilmesi gereken daha birçok kuralı listeler.
Yorum yazmak, programlamada en az değer verilen beceridir. Birçok kişi kodlarını açıklamak için yorum yazmayı unutuyor. Ama zaman kazandırır. Yorumlar, kodu okumak ve korumak için gereklidir.
CSS gevşek bir şekilde yapılandırıldığından ve herkes kendi kurallarını geliştirebildiğinden, yorumlar hayati önem taşır. Stil sayfanızı açıklamak için iyi yapılandırılmış yorumlar kullanmak iyi bir uygulamadır. Kodun bölümlerini ve ne işe yaradığını açıklayan yorumlar yazabilirsiniz.
/* video öğeleri nefes almak için alana ihtiyaç duyar */
.video {
kenar boşluğu: 2em;
}
/* kahraman bölümünü biçimlendirme */
.selamlama {
kenar boşluğu: 1em;
}
7. Önceden Tasarım Yapamamak
Pek çok insan bunu yapar, ancak bir plan olmadan kodlamaya başlamak büyük bir hatadır. CSS, ön uç yapınızın nasıl görüneceğini belirler. Tasarım, programlama becerileriniz hakkında çok şey söylüyor.
Siteniz için bir tasarım, vizyonunuzu ve sizi oraya götürmek için gereken kaynakları netleştirir. Projenizin zihinsel bir resmine sahip olun. Ardından kağıt üzerinde tasarlayın veya kullanın Canva gibi bir tasarım araç seti ne istediğini görselleştirmek için.
Projenin tam bir resmine sahip olduğunuzda, tüm kaynaklarınızı bir araya getirin ve kodlamaya başlayın. Size zaman ve fazlalık kazandıracak.
Bu Önerileri Neden Düşünmelisiniz?
Web üzerinde uygulama geliştiriyorsanız, CSS kullanacaksınız. CSS ile iyi çalışmak, pratik yapmayı ve standart kuralları takip etmeyi gerektirir. Kurallar, kodunuzu yalnızca okunabilir kılmakla kalmaz, aynı zamanda bakımı da yapılabilir kılar.
Standartlaştırılmış kod yazmak size zaman ve emek kazandıracaktır. Ön ucu biçimlendirmek için harcayacağınız zamanı daha karmaşık özellikler için harcayabilirsiniz. Ayrıca, kodu yeniden kullanabilmenizi ve başkalarıyla paylaşabilmenizi sağlar. Belirlenen kuralları izleyerek daha iyi kod yazın ve daha iyi bir geliştirici olun.
