Классы и id

Классы и id в разметке нужны постоянно, поэтому в Pug для них есть короткая запись, похожая на селекторы CSS: точка перед именем класса и решётка перед id.

Класс

Добавьте в src/index.pug абзац с классом:

p.note Открыто без выходных.

Точка и имя класса пишутся сразу после имени тега, без пробела:

<p class="note">Открыто без выходных.</p>

Несколько классов

Классы перечисляются подряд через точки:

p.note.important Сегодня закрываемся в 18:00.

Pug соберёт их в один атрибут class через пробел:

<p class="note important">Сегодня закрываемся в 18:00.</p>

Id

Решётка задаёт id. Обычно его ставят разделам, на которые ведут ссылки внутри страницы:

section#hours
  h2 Часы работы
  p Каждый день с 8:00 до 20:00.

Ссылка a(href="#hours") с любого места страницы прокрутит её к этому разделу:

<section id="hours">
  <h2>Часы работы</h2>
  <p>Каждый день с 8:00 до 20:00.</p>
</section>

Класс и id можно сочетать в любом порядке: section#hours.box и section.box#hours дают одно и то же.

div по умолчанию

Если строка начинается сразу с точки или решётки, Pug считает тег div. Карточка напитка в src/index.pug:

.card
  h2.card-title Капучино
  p.card-price $3

Слово div писать не нужно:

<div class="card">
  <h2 class="card-title">Капучино</h2>
  <p class="card-price">$3</p>
</div>

Такая запись удобна для обёрток и сеток, где почти все теги — div с классами.

Классы и CSS

Pug только пишет классы в разметку, стили задаёте вы. Подключите файл стилей в каркасе страницы, и правила вроде .card и .note применятся как обычно:

doctype html
html(lang="ru")
  head
    meta(charset="utf-8")
    link(rel="stylesheet" href="style.css")
  body
    .card
      h2.card-title Капучино

Файл style.css положите рядом с готовым HTML в dist/.

Частая ошибка

Пробел между тегом и точкой:

p .note Открыто без выходных.

После пробела начинается текст, поэтому класс превратился в слова абзаца:

<p>.note Открыто без выходных.</p>

Пишите класс вплотную к тегу: p.note.