javascript - Používanie vlastných HTML prvkov vs HTML prvkov s ID alebo triedami

Zo zvedavosti, aký vplyv to bude mať na stránku alebo stránku, ak namiesto používania ID alebo tried pre prvky jednoducho vytvoríte vlastné prvky pomocou JS a naformátujete ich pomocou CSS?

Napríklad, ak vytvorím prvok „container“ a použijem ho ako <container> namiesto <div class="container">, je medzi nimi nejaký rozdiel vo výkonnosti alebo niečo také?

Nepoznám, že by sa toto často používalo, a zaujíma ma prečo?

Odpoveď č. 1

To je ako povedať „Čo ak budem rešpektovať syntax a gramatiku angličtiny, ale všetky slová si vymyslím?“ Hoci takéto myslenie sa hodí do poézie, v technických oblastiach sa príliš neuplatní ;)

HTML má definovanú množinu platných značiek. Ak použijete akékoľvek značky, ktoré sú vymyslené, budú neplatné.

Teraz to neznamená, že by ste s tým nemohli prejsť; na celosvetovej sieti je odpustenie predvolené, takže ak by ste použili značky, ktoré ste si vymysleli, nebolo by to koncom sveta... ale stále by to bol zlý nápad, pretože by ste nemali žiadnu záruku, ako prehliadače tieto značky spracujú.

Takže jediná skutočná odpoveď na otázku „aký dopad to bude mať na stránku, ak namiesto používania ID alebo tried pre elementy jednoducho vytvoríte vlastné elementy pomocou JS a štýlujete ich pomocou CSS?“ je môže sa stať čokoľvek. Keďže by ste používali nestandardné HTML elementy, skončili by ste s nestandardnými výsledkami, ktoré by nikto z nás nemal skúšať predpovedať.

Ak naozaj chcete (a/alebo potrebujete) použiť vlastné prvky, pozrite sa na XML. V XML si môžete „vymyslieť“ svoje značky, ale stále môžete použiť CSS a otvárať dokumenty v prehliadači.

Napríklad uložte nasledujúce dva súbory a potom otvorte XML súbor v prehliadači:

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;
}

Odpoveď č. 2

HTML je štandardizovaný, nemôžete jednoducho vymýšľať nové elementy. Niektoré prehliadače zobrazia textový obsah elementu, ktorý nepoznajú, ale nie všetky, a v takom prípade váš HTML nebude platné HTML.