Код, который работает, и код, с которым удобно работать дальше, — не всегда одно и то же. Страница может выглядеть идеально в браузере при откровенно запутанной разметке внутри, но цена такой неаккуратности проявляется позже, когда приходится что-то менять или чинить в этом коде.
Последовательные отступы и понятная вложенность тегов делают структуру документа читаемой с первого взгляда — видно, какой элемент кому принадлежит, без необходимости внимательно считать открывающие и закрывающие теги построчно, что особенно важно в больших файлах.
Осмысленные имена классов, которые описывают назначение блока, а не его текущий внешний вид, стареют заметно лучше — класс card-title переживёт смену дизайна куда спокойнее, чем класс blue-bold-text, который перестанет соответствовать реальности при первой же смене цветовой схемы.
Избыточная вложенность блоков — ещё одна частая проблема неаккуратного кода: если для простого текста внутри карточки требуется пять уровней вложенных div без особой на то причины, разобраться в такой структуре спустя время становится заметно сложнее, чем должно быть.
Комментарии в коде полезны там, где решение неочевидно с первого взгляда — например, почему выбрано именно такое странное на вид значение отступа для конкретного случая. Комментировать очевидные вещи вроде "это кнопка" обычно не нужно, класс и так об этом сообщает.
Единый стиль форматирования по всему проекту — там пробел, тут перенос строки — легче всего поддерживать не силой воли, а автоматическим форматтером, который приводит любой код к единому виду при сохранении файла, снимая вопрос стиля с человека полностью.
Рекомендации по организации структуры HTML и CSS для долгосрочной поддерживаемости проекта разобраны в материалах раздела про изучение HTML на MDN.
