javascript - Özel HTML öğeleri kullanmak vs ID veya sınıfları olan HTML öğeleri

Merak ettiğim için soruyorum, eğer bir site veya sayfadaki öğeler için ID'ler veya sınıflar kullanmak yerine sadece JS ile özel öğeler oluşturup onları CSS ile stilize ederseniz, bunun site veya sayfa üzerinde herhangi bir etkisi olur mu, olursa ne olur?

Örneğin, eğer bir "container" elementi oluşturursam ve bunu <container> olarak kullanırsam, <div class="container"> yerine, performans açısından bir fark veya başka bir durum olur mu?

Bunun sık kullanılmadığını görüyorum ve nedenini merak ediyorum?

Cevap #1

Bu, 'Ya İngilizce'nin sözdizimini ve dilbilgisini ciddiye alırsam ama tüm kelimeleri uydurursam?' demek gibi bir şey. Bu düşünce iyi şiir yapabilir, ama teknik alanlar için pek uygun değildir ;)

HTML'in geçerli olan tanımlanmış bir etiket seti vardır. Eğer uydurma herhangi bir etiket kullanırsanız, bu geçersiz olacaktır.

Şimdi, bu, bununla başa çıkamayacağınız anlamına gelmiyor; Dünya Çapında Ağ'da affetme varsayılandır, bu yüzden kendinizin oluşturduğu etiketleri kullansanız da dünyanın sonu gelmez... ama yine de kötü bir fikir olur çünkü tarayıcıların bu etiketleri nasıl işleyeceğine dair hiçbir garantiniz olmaz.

Yani '"ID'ler veya sınıflar yerine JS ile özel elemanlar oluşturup CSS ile stil verirseniz bir sayfada ne etkisi olur?"' sorusuna tek gerçek cevap her şey olabilir. Standart olmayan HTML elemanları kullanacağınız için standart olmayan sonuçlar elde edersiniz ve bunları tahmin etmeye kalkışmamalıyız.

Gerçekten özel öğeler kullanmak istiyorsanız (ve/veya kullanmanız gerekiyorsa), XML'e bakın. XML'de kendi etiketlerinizi 'uydurabilirsiniz', ama yine de CSS uygulayabilir ve belgeleri bir tarayıcıda açabilirsiniz.

Örneğin, aşağıdaki iki dosyayı kaydedin ve ardından XML dosyasını bir tarayıcıda açın:

index.xml

<?xml-stylesheet href="style.xml.css"?>
<example>
 <summary>
     This is an example of making up tags in XML, and applying a stylesheet so you can open the file in a browser.
 </summary>
 <main>
     <container>This is the stuff in the container</container>
 </main>
</example>

style.xml.css

summary {
    display:none;
}
main container {
    border:2px solid blue;
    background:yellow;
    color:blue;
}

Cevap #2

HTML standarttır, yeni öğeler basitçe icat edemezsiniz. Bazı tarayıcılar tanımadıkları bir öğenin metin içeriğini görüntüler, ancak hepsi bunu yapmaz ve böyle bir durumda HTML'iniz geçerli bir HTML olmayacaktır.