Атрибуты, id и class: наводим порядок
Как устроены атрибуты, чем id отличается от class, зачем нужны data-атрибуты и как проверить разметку валидатором.
Что ты научишься делать
- Научишься давать элементам имена, по которым потом легко попасть из CSS
- Перестанешь путать id и class и поймёшь, почему id почти не нужен
- Найдёшь и починишь ошибки в чужой разметке
#Атрибут — настройка тега
Ты уже писал атрибуты десятки раз: href у ссылки, src и alt у картинки, type у поля. Пора разобрать, как они устроены.
Атрибут живёт внутри открывающего тега, после имени. Формула: имя, знак равенства, значение в кавычках.
<a href="/menu.html" class="btn" target="_blank">Меню</a><!-- ↑ ↑ ↑ --><!-- тег атрибут ещё атрибуты, через пробел -->Некоторые атрибуты — логические: у них нет значения, важно само присутствие. required, checked, disabled, hidden. Писать required="false" бессмысленно: атрибут есть — значит, включён.
Так не надо
<input type="text" required="false">Поле всё равно обязательное: браузер видит атрибут и включает проверку, значение он не читает.
Так надо
<input type="text">Не нужно требовать заполнения — просто не пиши атрибут.
#class: ярлык, который можно вешать многим
class — имя группы. Один класс можно повесить на сколько угодно элементов, а одному элементу дать сколько угодно классов через пробел.
Это основной инструмент связи разметки и стилей. Практически всё оформление в CSS цепляется именно за классы.
<button class="btn btn--primary btn--large">Записаться</button><button class="btn">Отмена</button>#id: уникальное имя
id — имя конкретного элемента. Оно должно быть единственным на всей странице.
Реально id нужен в трёх случаях: якорь для ссылки #contacts, связка label с полем, и обращение к элементу из JavaScript. Для оформления его лучше не использовать — почему, разберём в тринадцатом уроке, когда дойдём до специфичности.
| class | id | |
|---|---|---|
| Сколько раз на странице | Сколько угодно | Ровно один |
| Сколько на одном элементе | Сколько угодно, через пробел | Один |
| Для чего | Оформление, группировка | Якорь, label, JavaScript |
| Вес в CSS | Обычный | Очень большой — мешает переопределять |
#Как называть классы
Имя класса должно говорить, что это, а не как выглядит. Класс red-text станет враньём в тот день, когда дизайнер попросит сделать текст синим. Класс error останется правдой.
Так не надо
<p class="red bold big">Заказ не прошёл</p>
<div class="left-column-300">…</div>Имена описывают внешний вид. Поменяется дизайн — имена начнут врать, а переименовывать придётся везде.
Так надо
<p class="error">Заказ не прошёл</p>
<aside class="sidebar">…</aside>Имена описывают роль. Внешний вид можно менять сколько угодно — разметка остаётся верной.
Дальше в курсе мы будем пользоваться простым вариантом методологии BEM: блок, элемент, модификатор.
card— блок, самостоятельная штука;card__title— элемент внутри блока, через два подчёркивания;card--sale— модификатор, вариант блока, через два дефиса.
Выглядит длинно, зато по имени класса сразу понятно, где элемент живёт и чем отличается от соседа.
#data-атрибуты: свои данные в разметке
Иногда нужно положить в элемент кусочек информации, который не относится ни к одному стандартному атрибуту: идентификатор товара, состояние, настройку виджета.
Для этого есть data-*: любое имя после data- становится законным атрибутом. Браузер его игнорирует, а JavaScript легко читает.
<button data-product-id="42" data-action="add-to-cart"> В корзину</button>#Отступы, комментарии и порядок
Браузеру всё равно, как оформлен код. Разница видна только людям — тебе через месяц в первую очередь.
- Отступ два пробела на каждый уровень вложенности. Один стиль на весь проект.
- Один тег — одна строка, если содержимое не помещается в короткую строку.
- Комментарии — там, где непонятно почему, а не что.
<!-- закрытие блока карточек -->помогает,<!-- это див -->нет. - Имена — латиницей, строчными, слова через дефис.
#Валидатор: чужие глаза бесплатно
Браузер прощает почти любые ошибки: закрывает теги за тебя, игнорирует лишнее. Из-за этого сломанная разметка выглядит рабочей — до тех пор, пока не поедет в другом браузере.
Валидатор W3C (validator.w3.org) читает разметку строго и показывает список проблем: незакрытые теги, дубли id, картинки без alt, неправильную вложенность. Можно вставить код прямо в поле на сайте.
Где спотыкаются почти все
Один и тот же id на нескольких элементах
Почему Браузер молча возьмёт первый. Якорь прыгнет не туда, label свяжется не с тем полем.
Как надо Повторяющееся имя — это класс, а не id. id оставляй для по-настоящему уникальных вещей.
Классы названы по внешнему виду
Почему Через месяц class="blue" может оказаться зелёным. Имя перестаёт помогать и начинает путать.
Как надо Называй по роли: error, sidebar, card__title.
Кириллица или пробелы в значении класса
Почему Пробел разделяет классы: class="моя карточка" — это два класса, «моя» и «карточка». Кириллица работает, но ломается при копировании и в старых инструментах.
Как надо Латиница, строчные буквы, слова через дефис: my-card.
Атрибуты пишутся в закрывающем теге
Почему Запись </p class="text"> недопустима. Закрывающий тег содержит только имя.
Как надо Все атрибуты — в открывающем теге.
- Атрибут attribute
- Настройка тега вида
имя="значение"внутри открывающего тега. - Логический атрибут boolean attribute
- Атрибут без значения: важно само его наличие.
required,checked,disabled. - Класс class
- Имя группы элементов. Основная зацепка для CSS.
- Идентификатор id
- Уникальное имя элемента на странице.
- BEM block, element, modifier
- Способ называть классы:
block__element--modifier. - Валидатор validator
- Инструмент, проверяющий разметку на соответствие стандарту.
Проверь себя
<code>id</code> уникален. Нужно повторяющееся имя — это класс.
Имя описывает роль, а не внешний вид. Поменяется дизайн — <code>error</code> останется правдой.
Это логический атрибут: важен факт его наличия. Не нужен — просто не пиши.
Браузер их не трактует никак — это законное место для собственных данных.
Два подчёркивания — элемент блока. Вариант блока пишется через два дефиса: <code>card--sale</code>.
Задание
Найди и почини семь ошибок
В разметке ниже спрятаны ошибки: повторяющийся id, картинка без alt, незакрытый тег, класс с пробелом в значении, атрибут в закрывающем теге, label без связи с полем и h3 сразу после h1.
Почини всё. Классы называй по смыслу.
Подсказка 1
Начни с заголовка: h3 после h1 — пропущенный уровень. И реши, какому элементу оставить id="main".
Подсказка 2
Класс «текст большой» — это два класса на кириллице. Замени одним латинским именем по смыслу, например drink.
Подсказка 3
Подпись связывается так: <label for="name">Имя</label> и <input id="name">.
Показать решение
<h1>Кофейня «Полка»</h1><h2>Наше меню</h2><div id="main"> <img src="cup.svg" alt="Чашка латте" width="60" height="60"> <p class="drink">Латте на кокосовом молоке.</p></div><form> <label for="name">Имя</label> <input type="text" id="name" name="name"></form>