В каких случаях при верстке лучше использовать id а в каких class?

Question

[Евгения Сатонина]

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

Answer 1

[Максим Тимофеев]

id - используется для однозначной идентификации элемента, на странице может быть только 1 элемент с определенным id. Так же у элемента может быть больше 1 id.
class - используется для задания стиля многим элементам, и на странице может быть много элементов с одинаковым class. Так же у элемента может быть больше 1 класса.

В большинстве случаев можно использовать то и/или то, и это будет правильно. Но есть определенные случаи где использовать можно только id или наоборот.

дурной тон

- такого понятия нет в html. Есть объективные причины для использования id или class.

Если у Вас есть блок top-menu, его надо стилизовать и он один на странице и эти стили не применимы к другим блокам - оправдано использовать id, но и использование class не является ошибкой. Однако если таких блоков 2 - id использовать нельзя. Классы более удобны для стилизации, так как их можно иметь несколько для 1 элемента. Поэтому использовать id для стилизации кнопки - не лучший вариант, хоть и не ошибка.

вот пара цитат из авторитетных источников:

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.

www.w3schools.com/TAGS/att_global_id.asp

The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

https://developer.mozilla.org/en-US/docs/Web/HTML/...

А вот из спецификации html5.2:

When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element’s tree and must contain at least one character. The value must not contain any space characters.

w3c.github.io/html/dom.html#element-attrdef-global-id

Answer 2

[Александр Вульф]

Да, на данный момент везде используются классы за исключением 2 случаев:

1. Если с элементом взаимодействует JS (так легче получать доступ).
2. Если это единственный такой элемент на странице (#app).

Answer 3

[Рюрик Ростиславич]

Где удобней там и используют
На валидацию это не влияет, какой дурной тон?

Answer 4

[Access Denied]

Учите мат. часть - Идентифика́тор, ID (англ. data name, identifier — опознаватель) — уникальный признак объекта, позволяющий отличать его от других объектов.