Использование пользовательских элементов HTML против элементов HTML с идентификаторами или классами - PullRequest
6 голосов
/ 01 ноября 2011

Из любопытства, какое влияние это окажет на сайт или страницу, если вместо использования идентификаторов или классов для элементов вы просто создаете пользовательские элементы с JS и стилизуете их с помощью CSS?

Например, если я создаю элемент «контейнер» и использую его как <container> вместо <div class="container">, есть ли разница в производительности или что-то в этом роде?

Я не вижу, чтобы это часто использовалось, и мне интересно, почему?

Ответы [ 4 ]

2 голосов
/ 01 ноября 2011

Это все равно что сказать: «Что если я уважаю синтаксис и грамматику английского языка, но придумываю все слова?» Хотя это мышление делает для хорошей поэзии , оно не подходит для технических областей;)

HTML имеет определенный набор тегов, которые действительны . Если вы используете какие-либо теги, которые составлены, он будет недействительным.

Теперь, это не значит, что вы не можете сойти с рук; во всемирной паутине прощение является значением по умолчанию , поэтому, если бы вы использовали составленные вами теги, это не стало бы концом света ... но это все равно было бы плохой идеей, потому что у вас было бы нет никакой гарантии, как браузеры обрабатывают эти теги.

Таким образом, единственный реальный ответ на вопрос «как это повлияет на страницу, если вместо использования идентификаторов или классов для элементов вы просто создадите пользовательские элементы с JS и стилизуете их с помощью CSS?» может случиться что угодно . Поскольку вы будете использовать нестандартные элементы HTML, вы получите нестандартные результаты, которые никто из нас не должен пытаться прогнозировать.

Если вы действительно хотите (и / или должны) использовать пользовательские элементы, изучите XML. В XML вы можете «составлять» свои теги, но все же можете применять CSS и открывать документы в браузере.

Например, сохраните следующие два файла, а затем откройте файл XML в браузере:

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;
}
2 голосов
/ 01 ноября 2011

HTML стандартизирован, вы не можете просто изобретать новые элементы.Некоторые браузеры отображают текстовое содержимое элемента, который они не распознают, но не все, и ваш HTML не будет действительным HTML в таком случае.

1 голос
/ 01 ноября 2011

HTML - это определенный язык, элементы и теги имеют определенное значение в формате. Вы не можете изобрести новый элемент не только потому, что браузеры могут отображать эти элементы непоследовательно, но и потому, что значение и структура документа становятся недействительными.

Лучше всего использовать элемент, который имеет правильное значение для контента, который вы хотите доставить. Если вам нужен универсальный контейнер для стиля, правильным элементом является div. Есть похожие элементы, которые также дают некоторое семантическое значение. Я бы порекомендовал проверить индекс HTML-тега и доктора HTML5 для помощи в выборе правильного элемента.

Звучит так, как будто <div class="container">...</div> наиболее близко к тому, что вам нужно из вашего краткого описания.

0 голосов
/ 12 ноября 2018

Если пользовательские элементы облегчают чтение и управление вашим HTML, продолжайте и используйте их.

С тех пор, как был задан этот вопрос, пользовательские элементы были добавлены в WHATWG HTML Living Standard вместе со связанным JavaScript API.Некоторые платформы веб-компонентов уже реализуют некоторые из этих спецификаций.Это больше не табу, как это было в 2011 году. (Я помню некоторые неприятные проблемы, связанные с DOM в Internet Explorer при попытке использовать недавно анонсированные элементы HTML5.)

На момент написания статьи (ноябрь 2018)Пользовательские элементы были реализованы в нескольких основных браузерах.Тем не менее, MDN указывает, что Microsoft Edge еще не реализовал пользовательские элементы, хотя в блоге за 2015 год говорится, что команда Edge «с радостью продолжит поддерживать и вносить свой вклад в это путешествие».

...