Разница между использованием MULTIPLE атрибутов 'id' и 'class' в HTML и CSS

Question

Разница между использованием MULTIPLE атрибутов 'id' и 'class' в HTML и CSS

В соответствии с принципами CSS, когда мы хотим реализовать повторное использование стилей, мы должны использовать class атрибут и когда мы знаем, что есть уникальный элемент во всей структуре DOM, мы должны использовать id атрибут этого элемента, а затем укажите стиль.

Но в эту эпоху веб-приложений структура DOM может быть слишком сложной, и существует вероятность дублирования id, Лучший пример будет #title, Его название, которое может появиться в любом месте документа. Теперь лучшая часть, если я использую #title или же .title при определении стилей (при условии, что они появились более одного раза и имеют разного родителя), вывод, который генерирует CSS, одинаков. Этот jsfiddle поможет вам понять, что я имею в виду http://jsfiddle.net/dewbot/LGAQD/

У меня сложилось впечатление, что так же, как JS Renderer, CSS Parser останавливает итерацию, когда обнаруживает первый #title но этого не происходит, он продолжает итерацию, пока не достигнет EOF, как class, Так что возникает вопрос, почему мы должны использовать несколько class и не id?

2

html css dom css-selectors dom-traversal

Источник

user757449 24 мар '12 в 07:51

4 ответа

Решение

Я думаю, что вы неправильно проанализировали CSS. Браузер не перебирает строку файла CSS за строкой и применяет стили к элементам в файле HTML, это наоборот. Браузер анализирует HTML и всякий раз, когда находит class или же id атрибут, он ищет его в файлах CSS. (Это очень упрощено, но помогает понять суть).

Просто потому, что браузер отображает его правильно, если у вас есть несколько ids не означает, что вы должны это сделать. Стандарт четко говорит о том, что id должен быть уникальным.

4

Источник

user767272 24 мар '12 в 07:59

Вы сами на это ответили.

CSS применяет его ко всем id с и class Если это можно найти. Но JS/ jQuery будет реализовывать его первым найденным.

Итак, ваш вопрос становится:

Должен ли я применять то же самое id много элементов для манипуляции JS? Ответ: Baaaaa.... D решение

Должен ли я применять то же самое id Есть много элементов для CSS? Ответ: все еще плохо, решение! но будет реализовывать ваши правила

Вам также следует попытаться использовать правила CSS и JS, применяемые иерархически, таким образом, вы никогда не ошибетесь. Подобно, #Heading div#Title{css rules here} или же $('#Heading div#Titles')...jQuery rules here

Следующая вещь - попытаться реализовать идентификаторы консервативным способом.

Затем попробуйте предоставить уникальный идентификатор для элемента на вашем веб-сайте / в приложении, а не на одной странице. Это избавит вас от многостраничных служебных скриптов, которые вы включаете в свои страницы.

например: заголовок в верхней части домашней страницы: #Home-Top-Heading

Надеюсь, поможет.

1

Источник

24 мар '12 в 08:04

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

CSS не волнует идентификаторы mutliple, javascript

http://css-tricks.com/the-difference-between-id-and-class/

0

Источник

user750852 24 мар '12 в 08:05

Другие вопросы по тегам html css dom css-selectors dom-traversal

user106224 24 мар '12 в 07:57 2012-03-24 07:57 · Accepted Answer · 2012-03-24 07:57

Так что возникает вопрос, почему мы должны использовать несколько class и не id?

Поскольку в спецификации HTML так сказано, нарушение правил часто приводит к нарушению кода.

Имеет ли смысл идентифицировать несколько элементов по одному и тому же идентификатору? Думаю, нет. Вот для чего нужны классы: классифицировать похожие элементы.

Теперь лучшая часть, если я использую #title или же .title при определении стилей (при условии, что они появились более одного раза и имеют разного родителя), вывод, который генерирует CSS, одинаков.

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

У меня сложилось впечатление, что так же, как JS Renderer, CSS Parser останавливает итерацию, когда обнаруживает первый #title но этого не происходит, он продолжает итерацию, пока не достигнет EOF, как class,

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

Пока элемент имеет определенный идентификатор, он должен совпадать с любыми селекторами идентификаторов, которые ищут этот конкретный идентификатор. Таким образом, ожидается, что парсеры будут сопоставлять любые и все элементы с данным идентификатором с одним селектором идентификатора, даже если в HTML неправильно иметь несколько элементов с одинаковым идентификатором. Другими словами, CSS не обеспечивает уникальность идентификаторов, которая требуется для HTML. Этот ответ объясняет.

С учетом всего вышесказанного, суть заключается в следующем: назначать идентификатор только одному элементу за раз и использовать классы для группировки нескольких похожих элементов. Не пытайтесь быть умным и нарушать правила.