Почему принято использовать id для скриптов, а class для стилей?

Question

[Hellas]

Возможно, такая методика просто принята для удобства и не более того?

Answer 1

[DevMan]

и id и class используются и в js и в css.
разница между ними, помимо упомянутого быстродействия, в том, что id должен быть уникальным (определенный id должен быть только у одного элемента), а одинаковый class может быть у множества элементов.

Comments

[DevMan]

Макс Минимус: одно замечание: не "будет", а "возможно будет".
и никто вам подобного поведения не гарантирует.

[DevMan]

Макс Минимус: систему можно проектировать как угодно. только выбор по id дается на откуп конкретному браузеру.
в спеках сказано: id должен быть уникальным. остальные разговоры - ни о чем.

[DevMan]

дабы не возращаться к этому вопросу читаем
https://www.w3.org/TR/html-markup/global-attribute...
"A unique identifier for the element."

и https://developer.mozilla.org/en-US/docs/Web/HTML/...
"The id global attribute defines a unique identifier (ID) which must be unique in the whole document"
просьба все желающих поспорить не ссылаться на меня, ибо у меня нет ни малейшего желания реагировать на ересь.

[Матвей Мамонов]

Макс Минимус: давайте использовать вещи по назначению. Вы ведь дома лопатой колбасу не режете? Теоретически, конечно, возможно. Но это неправильно.

[DevMan]

Матвей Мамонов: я привел вам спецификации.
следовать им или нет - ваше личное дело.
зачем вы со мной то спорите? обращайтесь в w3 или напрямую в мозилу.

[Матвей Мамонов]

DevMan: Так я и не с вами спорю. Я написал это Максу Минимусу, посмотрите.

[DevMan]

Матвей Мамонов: сори. просто ваш ответ прилетел мне на почту и я сразу не сообразил.

[Матвей Мамонов]

DevMan: ничего, бывает :)

Answer 2

[Алексей Николаев]

Селектор по ID быстрее, что актуально для быстродействия (работа с DOM - самые медленные операции, как правило). Для скриптов тоже часто используются селекторы по классам, если нужно провести операции с несколькими объектами.

Опять же, в некоторых методологиях (например, в SMACSS) более чем нормально использовать селектор по id в CSS, в определенных случаях. Но я предпочитаю этого не делать без явной необходимости.

Answer 3

[bro-dev]

Никогда не используйте id. Иногда может потребоваться дублировать то что казалось бы ну ни как не может быть дважды на странице, а заметить что там внутри где то ID используется сложно. Экономить на быстродействии тоже не строит это сущие мелочи в данном случае.

Answer 4

[# a r t u r #]

Роман Бережнов к примеру есть форма обратной связи, определенно точно второй такой формы быть не может, почему бы в этом случае не использовать id?

А если есть кнопка и class состоит из нескольких элементов, что-то вроде
class="ui small red icon button"

- предлагаете добавить в конец еще один button-click для обработчика? Или вовсе не добавлять и ссылаться на button? При этом если на странице еще есть кнопки с этим классом, то они тоже будут закреплены за обработчиком...

id и class нужно использовать и то и другое по необходимости, стараясь id использовать чаще!

Comments

[bro-dev]

Чето не понял почему форм не может быть 2, одна для строителей другая для парикмахеров, а действие одно и тоже. Событие вешается на ".formclass button". Если нужно будет еще форму для дворников то просто копируется кусок html кода. В случае с ID это будет вызывать жесть какие неуловимые баги, и даже если все знать как устроено нужно правть и в html и в js.

[# a r t u r #]

Роман Бережнов: Ладно, давайте так:

есть две формы: form class="form"

нужно по разному обработать submit этих форм, по какому селектору ссылаться на них? По-моему проще и красивее добавить ID к каждой:

form class="form" id="formOne"
form class="form" id="formTwo"

[bro-dev]

# a r t u r #: А если кому то незнакомому придется сделать еще 1 форму formOne но чуть чуть другую, то ему что весь js копатить где вы ее запрогали и разбираясь в этом этом всем и добавлять еще обробочики. Не плодите лишних сущностей id это рудимент. Вот правельно.
form class="form formOne"
form class="form formTwo"

Answer 5

[Alexander Litvinenko]

Раньше, селектор по ID был быстрее, в современном JS это уже не так, однако исторически это все еще приводят как аргумент. Для читабельности кода, часто удобно когда есть уверенность что это именно "вон тот элемент", а не какой-то другой, для чего удобно использовать ID.

Answer 6

[Матвей Мамонов]

Такого четкого разграничения, как вы написали, нет.
Да, в различных туториалах по JS постоянно обращаются к элементам через getElementById(), потому что в основном обращаются к одному элементу. Ясное дело, что никто не будет использовать id для нескольких элементов (хотя бы потому, что в спецификации четко описан запрет такого действия).

Нужно самому понимать, в каких случаях обращаться по id, а в каких - по классу. Если вы точно уверены, что такой элемент будет один, то используйте id. Если это, например, нумерованный список, то, понятное дело, вы не будете выдавать id каждому элементу.

Нет четко определенного разграничения по поводу того, где что использовать.

Comments

[Матвей Мамонов]

P.S. Я вообще не пользуюсь не тем, ни другим.
Использую только вложенность. И пусть это, как многим кажется, не самый рациональный подход, зато работает он точно и всегда понятно, к какому элементу я обращаюсь, пусть в css, пусть в js.

[abberati]

Матвей Мамонов: Серьёзно?! Только имена тегов? Это как вообще возможно?

[Матвей Мамонов]

abberati: обычный nesting.

ul > li {
// затронет только не li, которые находятся в ul (ol не затронет)
}

table > tr:nth-child(2) {
// затронет только каждую вторую строку таблицы
}

div + p {
// затронет только те теги p, которые идут сразу после div
}

div > span:first-of-type {
// затронет только первый элемент span внутри тега div
}

div[class~="imageable"] {
// затронет только те div, в классе которых присутствует слово imageable
// да, иногда использую классы, в основном для иконок
}

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

Да, большинство из них не будут работать в старых браузерах. Но меня это не тревожит.

[Матвей Мамонов]

Матвей Мамонов: Да и не настолько, что вы вообще сможете это почувствовать.

Куда удобнее читать подобный код, чем код, в котором наследуются классы, потому что никогда не знает, к какому элементу относится данный класс. А здесь сразу понятно, какие элементы буду затронуты.

[Alexander Litvinenko]

Матвей Мамонов: в современном JS используют querySelector() и часто data-*, вместо устаревших getElementById()

[Матвей Мамонов]

Alexander Litvinenko: да, я тоже так делаю. Нчего IDшники плодить без надобности.

[abberati]

Матвей Мамонов: я знаю о css3 селекторах и о том, как работает nesting. Просто не могу представить, как можно написать хотя бы три тысячи строк css, используя классы только для иконок.
Такой код читать гораздо сложнее, чем семантически структурированный css, в котором хотя бы понятно, что к чему относится.

.order
    // something
    button.send
        // something
    button.cancel
        // something

или

div:nth-child(5)
    // something
    &>button:first-child
        // something
    &>button:last-child
        // something

[abberati]

Матвей Мамонов: а чтобы не перемешивать классы, есть много способов не выпускать их в глобальную область видимости. БЭМ, например, или препроцессорный nesting. Я использую и то, и другое.

[Матвей Мамонов]

abberati: каждому свое.
3 тысячи строк css держать в одном файле тоже не есть хорошая привычка.

[abberati]

Матвей Мамонов: а я не говорил про один файл. Держать столько в одном файле - это не привычка, а диагноз :)

Даже если в файле 15-30 вызовов селекторов, то при вашем подходе уже будет сложно понять что кому и зачем.

Большой у вас опыт вёрстки? Можете показать что-то написанное с этим подходом? Просто хочется посмотреть, как вы умудрились организовать это и не запутаться.

[Матвей Мамонов]

abberati: как раз-таки наоборот, с тегами дело более явное, чем с классами.

div > a куда более очевидно, чем .container > .open_page

Опыт большой. Показать не могу по причине того, что мало чего из написанного выходит далее, чем за пределы моего пк.

[Матвей Мамонов]

abberati: Нет, ясное дело, что и классами я тоже пользуюсь. Без них ВООБЩЕ тоже нельзя. Просто я к тому, что стараюсь не использовать их там, где без них можно обойтись.