Temiz HTML Kodu Yazmanın En İyi 8 Uygulaması

Hiç HTML'nize baktınız ve merak ettiniz mi…

İyi kod mu yazıyorum?

Yeterince profesyonel görünüyor mu? Ben doğru şeyler yapıyorum? HTML kodu nasıl göründüğü gibi temiz mi?

Bu sorulara sahip olmak normal ve iyidir, özellikle de dağınık, karışık, özensiz, spagetti kodu yazmayı istemezseniz:

Temiz kod yazmak en büyük endişelerinizden biri olmalı çünkü çoğu web sayfası HTML üzerinden sunuluyor. Sitenizin temellerini bozmak istemezsiniz. Sadece yanlış ve utanç verici.

Burada, bu şüpheleri unutmak ve onu okuyan herkesi etkileyecek temiz, doğru HTML yazmak için 8 harika uygulama bulacaksınız.

1. Bir f ** k verin

Ciddi anlamda. İyi kod yazmanız için gereken en önemli şey, doğru olanı yapma arzunuzdur. Temiz HTML kodu yazmak kolaydır, ancak çok dikkat etmeniz ve çok dikkat etmeniz gerekir.

“Temiz kod, umursayan biri tarafından yazılmış bir koddur” - Michael Feathers

Kodunuz, geliştiricinizin türünü yansıtır. Birinin kodlama konusunda tutkulu olup olmadığını veya sadece HTML kodunun birkaç satırını okuyarak bir güvence vermediğini söyleyebilirsiniz. Tembel profesyonel olmayan kişilerin kötü ve örgütsüz kod yazanlar olması tesadüf değildir.

2. Girinti

Girintili kodun okunması daha kolay, anlaşılması daha kolay, değiştirilmesi daha kolay ve bakımı daha kolaydır. Kod doğru girilmemişse, öğeler arasındaki ebeveyn-çocuk ilişkilerini anlamanın ne kadar zor olduğunu görün.

Kötü HTML Kodu:
  
 
 

& kopyala; 2018 Tüm Hakları Saklıdır.

     
  
  • Ev   
  • Takım   
  • Fiyatlandırma   
Daha iyi HTML Kodu:
  
    
      
        

& kopyala; 2018 Tüm Hakları Saklıdır.

             
        
              
  • Ev           
  • Takım           
  • Fiyatlandırma                        

Girinti için kaç boşluk kullanmalısınız? Birçok insan 4 boşluk, diğerleri ise 2 diyor ve neredeyse herkes sekmelerden nefret ediyor.

Benim tavsiyem? Fazla düşünmeyin, belirli bir alan değeri kullanmak gerçekten önemli değil. Asıl mesele şu ki…

3. Sadece Tutarlı Olun

Temiz bir HTML kodu yazmak her zaman iyi uygulamaları seçmek ve kötü olanları önlemekle ilgili değildir. Çoğu zaman aynı kod satırını yazmak için farklı yaklaşımlar kullanabilirsiniz.

Örneğin:

  • Kimlikler ve sınıflar için kısa çizgi veya alt çizgi kullanabilirsiniz
  • Tekli alıntı veya çift alıntı bağımsız değişkenini kullanabilirsiniz
  • 2 veya 4 boşlukla girintili

Sadece tutarlı ol. Hoşunuza giden belirli bir uygulama bulduğunda, buna bağlı kal ve her yerde kullan. Tutarsızlık, kodunuzu sizin için ve okumak zorunda olan zavallı ruh için son derece kafa karıştırıcı kılar.

4. “Divitis” i imha edin

“Divitis”, HTML’deki yaygın bir problem için eğlenceli bir isim. Genellikle divs'i fazla kullanıyoruz, çünkü CSS'de stil oluşturma için tüm unsurları sarmak ve hedeflemek istiyoruz. Ardından, tamamen gereksiz olan ebedi bir divs listesine sahip olduk.

Kötü HTML Kodu:
  
Başlık
  
Altyazı
  
İçerik Gönderin
  
    
          
  • Öğe 1
  •       
  • Eleman 2
  •        
Daha iyi HTML Kodu:
  

Başlık   

Altyazı   

İçerik Gönderin

  
        
  • Öğe 1
  •     
  • Eleman 2
  •   

Yazarların yazma işlemi sırasında taslaklarını defalarca düzenledikleri gibi, HTML'nizi sürekli yeniden gözden geçirmeli veya yeniden yazmalısınız. Tüm div sayısını azaltın ve tüm gereksiz unsurları silerek kodunuzu temizleyin.

5. Yorumlardan kaçının

HTML bir programlama dili değildir, HTML işaretlemesi çok açıklayıcı olduğu için yorumlar gerekli değildir. Kendinizi HTML'niz hakkında çok yorum yaparken bulursanız, HTML öğeleri başvurusunu gözden geçirmelisiniz.

“Kötü kod yorum yapma. Yeniden yaz. ”- Brian W. Kernighan

Her yerde yorum eklediğiniz için kodunuzun anlaşılması kolay olmayacak. Bunları işleri daha net hale getirmek için kullanabilirsiniz (örneğin, birçok kod satırından sonra bir div kapattığınızı göstermek için). Ancak, açıkça yazılmış veya kötü yazılmış kod hakkında yorum yapmayın.

6. Sınıf = “açık ad”

Class = “wpr” ne anlama geliyor?

Genişlik Paragrafı WordPress? Whopper ?! Temiz HTML kodu bir trivia oyununa benzememelidir.

Kimlikleriniz ve Sınıflarınız için anlamlı isimler kullanın. Kısa, açıklayıcı olmalı ve sadece bir kavramı temsil etmelidirler. HTML'nizi daha net hale getirir ve stil işlemlerini kolaylaştırır.

"Wpr" yerine "sarmalayıcı" sınıfınızı adlandırmanızın daha iyi olacağını düşünmüyor musunuz?

7. Boşluk Kullan

Birçok kişi, beyaz boşluk kullanmadan, birlikte kod yazdı. Sonuç? Noktalama işaretleri veya paragraf olmayan bir kitap okumak gibidir:

Cehennem:

Table

Veri 1 Veri 2
Kalküta Portakal
Daha iyi kod:

Tablo


  
    
    
  
  
    
Veri 1 Veri 2
Kalküta      Portakal   

Boşluk kullanın: girinti, boş satırlar, satır sonları. Diğer insanlar (siz dahil) gelecekte kodunuzu başağrısı olmadan okuyabilmelidir. Temiz okunabilir HTML kodu yazdıktan SONRA, dosyalarınızı küçültmek için dosyalarınızı küçültmek tamamdır.

8. En İyiden Kopyala

Dünyanın en iyi sanatçıları zanaatlarını, hayran oldukları insanların işlerini kopyalayarak öğrendiler. Temiz bir HTML kodu (aynı zamanda oldukça yaratıcı bir işlem) yazmak için aynı stratejiyi kullanabilirsiniz. Güzel temiz kod yazmayı öğrenmenin en kolay yolu basittir: güzel temiz kodu okuyun ve kopyalayın.

“Hiçbir şeyi taklit etmek istemeyen, hiçbir şey üretmeyenler. “- Salvador Dalí

Yapabilirsin:

  • Açık Kaynak projelerini keşfedin. Var olma nedenlerinden biri de, hepimiz birbirimize iş aramayı öğrenip geliştirebiliriz.
  • Size en iyi kodlama uygulamalarını öğreten blogları ve makaleleri okuyun.
  • Udemy Geliştirici Kurslarına Katılın. Harika değerlendirmeleri olanları seçin.

İşleri yapmanın kesin bir doğru yolu olmadığını göreceksiniz… ama aynı zamanda temiz ve dağınık HTML kodu arasında BÜYÜK bir fark olduğunu keşfedeceksiniz.

Ve kodunuzun tam bir karışıklık gibi görünmesini istemiyorsunuz değil mi? ;)

*** Bunu beğendin mi? Lütfen bana birkaç alkış verin, böylece başkaları bu makaleyi bulabilsin ***