CSS Yorumları

Artık kural yazmayı ve sayfaya bir stylesheet bağlamayı biliyorsunuz. Ama bazen kodun yanına kendinize bir not bırakmak, ya da test ederken bir stili silmeden geçici olarak kapatmak istersiniz. CSS yorumları tam bunun için var.

CSS yorumu nedir?

CSS yorumu, /* ile */ arasına yazılan bir nottur. Tarayıcı stilleri uygularken onu tamamen yok sayar. Kısa hatırlatmalar için, stylesheet içindeki bölümlere başlık vermek için ya da deneme yaparken bir kuralı geçici olarak devre dışı bırakmak için kullanabilirsiniz.

Yorum nasıl yazılır

Yorum şöyle yazılır: /* notunuz buraya */. Açılış /* ile kapanış */ arasında kalan her şeyi CSS motoru görmezden gelir. Ziyaretçiler yorumları sayfa metni olarak görmez; yorumlar yalnızca stylesheet kaynağında durur (dosyayı açarsanız DevTools'ta da görünür).

Kısa not neden yeter

Kuralın üstündeki tek satırlık bir yorum, bir değerin neden orada olduğunu anlatabilir: marka rengi, geçici bir çözüm ya da erişilebilirlik tercihi gibi. Uzun yazı yerine kısa not yazın; birkaç hafta sonra size hatırlatmak için küçük bir ipucu yeter.

Çok satırlı yorumlar

Yorum birkaç satıra yayılabilir. Sık kullanılan yöntem, birbiriyle ilgili kural grubunun önüne küçük bir "bölüm başlığı" koymaktır; böylece uzun bir stylesheet bile kolay taranır.

Çok satırlı yorumları kısa tutun. Dosyanın ortasında koca koca açıklama paragrafları olması, hiç yorum olmamasından bile daha zor okunur hale getirir.

Bir kuralı geçici olarak devre dışı bırakma

Tek bir declaration'ı ya da bütün bir kuralı yorumun içine alarak silmeden kapatabilirsiniz. Sonra işaretleri kaldırdığınızda stil geri gelir. Düzeni hangi özelliğin bozduğunu ararken çok işe yarar.

Test ederken iyi alışkanlık

Anlamanıza yardım eden en küçük parçayı yorum satırı yapın; önce yalnızca bir declaration. Sayfa yeniden doğru görünüyorsa suçluyu bulmuşsunuz demektir. Ardından ya değeri düzeltin ya da işe yaramayan kodu silin. Bitmiş bir stylesheet'te büyük devre dışı bloklar sonsuza kadar kalmasın.

HTML yorumlarıyla aynı şey değil

HTML yorumları <!-- ve --> ile yazılır; CSS yorumları ise /* ve */ ile. HTML yorum işaretlerini .css dosyasına yapıştırmayın (ve <style> bloğuna da, çünkü orada CSS sözdizimi geçerlidir). Her dilin kendi yorum yazımı vardır. HTML yorumlarını daha önce öğrendiyseniz bunu, işaretleri farklı olan benzer bir beceri olarak düşünün.

Yorumlar kasa değildir

Stylesheet'i açabilen (veya Kaynağı Görüntüle / Network sekmesine bakabilen) herkes yorumlarınızı okuyabilir. CSS yorumlarına asla parola, özel anahtar ya da gizli token yazmayın. Yorumlar geliştirme notları içindir; hassas verileri saklamak için değil.

Kendiniz deneyin

1. color ve font-size belirleyen bir .hero kuralı içeren bir alıştırma stylesheet'i (veya <style> bloğu) açın.
2. Kuralın üstüne renk seçimini açıklayan tek satırlık bir yorum ekleyin.
3. font-size declaration'ını /* … */ içine alın, kaydedin ve sayfayı yenileyin; boyut varsayılana döner, renk ise uygulanmaya devam eder.
4. font-size çevresindeki yorum işaretlerini kaldırıp sayfayı tekrar yenileyin; stil geri gelir.
5. İsteğe bağlı: Kural grubunun üstüne kısa, çok satırlı bir bölüm yorumu ekleyin.

Sık yapılan hatalar

• CSS içinde HTML işaretleri (<!-- -->) kullanmak; CSS motoru bunları yorum saymaz
• Kapanış */ işaretini unutmak; stylesheet'in geri kalanı yok sayılır
• Yorumları iç içe koymaya çalışmak (/* outer /* inner */ still broken */); CSS yorumları düzgün şekilde iç içe geçmez
• Üretim dosyalarında aylarca devasa yorum satırı haline getirilmiş kural yığınları bırakmak
• Yorumlara gizli bilgi veya özel URL yazmak

Özet

• CSS yorumları /* ve */ arasına yazılır
• Tarayıcı stilleri uygularken yorum metnini yok sayar
• Kısa notlar, bölüm başlıkları veya test sırasında geçici devre dışı bırakma için kullanın
• HTML yorumları <!-- --> ile yazılır; bu sözdizimini CSS'e karıştırmayın
• Yorumlar kaynakta görünür; oraya asla gizli bilgi koymayın