javascript - Korištenje prilagođenih HTML elemenata nasuprot HTML elemenata s ID-jevima ili klasama

Iz znatiželje, kakav će utjecaj, ako uopće neki, imati na stranicu ili web lokaciju ako umjesto korištenja ID-ova ili klasa za elemente jednostavno kreirate prilagođene elemente pomoću JS-a i stilizirate ih s CSS-om?

Na primjer, ako stvorim element "container" i koristim ga kao <container> umjesto <div class="container">, postoji li razlika u performansama ili nešto slično?

Ne vidim da se ovo često koristi i pitam se zašto?

Odgovor #1

To je kao da kažeš "Što ako poštujem sintaksu i gramatiku engleskog, ali izmislimo sve riječi?" Iako takvo razmišljanje doprinosi dobroj poeziji, nije prikladno za tehnička područja ;)

HTML ima definirani skup oznaka koje su valjane. Ako koristite bilo koje oznake koje su izmišljene, to će biti nevaljano.

Sada, to ne znači da ne možete proći s tim; na Svjetskoj mreži oprost je zadano stanje, pa ako biste koristili oznake koje ste sami smislili, to ne bi bio kraj svijeta... ali i dalje bi bila loša ideja jer ne biste imali jamstvo kako će preglednici rukovati tim oznakama.

Dakle, jedini pravi odgovor na 'kakav će utjecaj imati na stranicu ako umjesto korištenja ID-ova ili klasa za elemente, jednostavno kreirate prilagođene elemente s JS-om i stilizirate ih s CSS-om?' je može se dogoditi bilo što. Budući da biste koristili nestandardne HTML elemente, završili biste s nestandardnim rezultatima, što nitko od nas ne bi trebao pokušavati predvidjeti.

Ako stvarno želite (i/ili trebate) koristiti prilagođene elemente, pogledajte XML. U XML-u možete "izmisliti" svoje oznake, ali još uvijek možete primjenjivati CSS i otvarati dokumente u pregledniku.

Na primjer, spremite sljedeće dvije datoteke, a zatim otvorite XML datoteku u pregledniku:

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

Odgovor #2

HTML je standardiziran, ne možete jednostavno izmišljati nove elemente. Neki preglednici će prikazati tekstualni sadržaj elementa kojeg ne prepoznaju, ali ne svi će, i vaš HTML u takvom slučaju neće biti valjani HTML.