Чистый код и порядок

Порядок — это не про аккуратность ради аккуратности. Это про то, чтобы через месяц вы понимали свой сайт, а запрос к нейросети не приходилось начинать словами «у меня тут всё сложно».

Имена классов по одному правилу

Правило называется БЭМ, и запомнить в нём нужно три строки: блок, элемент, модификатор.

<article class="card card--link">
  <h3 class="card__title">Хлебные крошки</h3>
  <p class="card__desc">Путь до текущей страницы</p>
</article>

card — блок, самостоятельная вещь. card__title — его часть, она не существует отдельно, и это видно по двойному подчёркиванию. card--link — разновидность того же блока, через двойной дефис. Всё, правило кончилось.

Зачем это нужно на самом деле: по имени класса сразу понятно, где искать стиль и что сломается от правки. Класс blue-box через месяц не скажет ничего, а спустя редизайн ещё и соврёт — коробка станет зелёной.

Есть и второе применение, менее очевидное. Имена классов — это общий язык с нейросетью: назвав их в запросе, вы получаете код, который встаёт рядом с вашим, а не приносит ещё один набор имён для тех же самых вещей.

Как разложить файлы

Четыре файла CSS вместо одного длинного и по одному файлу JS на задачу. Подключаются по порядку, и порядок имеет значение. Открывать и править их удобно в бесплатном VS Code: он подсвечивает разметку и показывает парную скобку.

Повторяющиеся куски — пометить сразу

Шапка, подвал, крошки повторяются на каждой странице. Пока сайт статический, они действительно скопированы в каждый файл — и это нормально, если выполнены два условия: куски совпадают дословно и помечены комментарием.

<!-- CHUNK: footer -->
<footer class="site-footer">
  ...
</footer>
<!-- /CHUNK: footer -->

На пятом этапе такие куски переезжают в CMS и становятся чанками — правишь в одном месте, меняется везде. Пометки заранее превращают этот переезд в механическую работу.

Три привычки, которые дорого стоят

Всё три появляются сами, если не следить, и каждая потом отнимает время.

• Стиль, вписанный прямо в тег. Такой стиль перебивает любые правила из файлов, и найти его глазами в тысяче строк разметки почти невозможно. Место стиля — в CSS-файле, а в разметке остаются только классы.
• Пометка «важно» вместо разбирательства. Она выключает обычные правила спора между правилами. Один раз помогает, на третий — вы уже не понимаете, какое правило вообще работает.
• Мёртвый код. Закомментированные куски «на всякий случай» и правила для блоков, которых на сайте больше нет. Удалять не страшно: если сайт под системой контроля версий, вернуть можно что угодно.

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

Чего просить у нейросети, а чего не просить

Просить: «перепиши этот блок по БЭМ», «вынеси повторяющиеся цвета в переменные», «объясни, зачем здесь этот класс». На такие запросы приходит польза.

Не просить: «наведи порядок в моём CSS» целиком. Ответ будет выглядеть убедительно, а потом выяснится, что переименовано сорок классов и половина страниц поехала. Порядок наводится блоком за блоком, с проверкой в браузере после каждого.