Самый простой способ борьбы с багами — не допускать их появления ещё при написании кода. Для этого программисты придумали стили кодирования и линтеры.

Стили кодирования

Код без форматирования и структуры тяжело читать и мучительно поддерживать. В каше из тегов или селекторов легко допустить ошибку: не закрыть див, пропустить лишнее свойство или сломать атрибут.

Без форматирования

<div class="lid">
<h1>
Как кофе делает счастливым</h1></div><p clas=
"main_discription">Изучили исследования...</p>
</div>

С форматированием

<div class="lid">
  <h1>Как кофе делает счастливым</h1>
</div> <!-- Див рано закрылся -->
  <!-- Опечатка в атрибуте clasS -->
  <p clas="main_discription">
    Изучили исследования...
  </p>
</div>

Без структуры

.score, .badge 
.counter {
  position: relative;
  font-size: 16px;
  float: left;
  margin: 13px 0;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 20px;
  z-index: 10;
  font-size: 12px;
  text-align: center;
  line-height: 14px;
}

Всё по группам

.score,
/* Забыли запятую, сломался селектор */
.badge,
.counter {
  position: relative;
  z-index: 10;
  
  float: left;
  
  margin: 13px 0;
  padding: 14px 0;
  
  text-align: center;
  vertical-align: middle;
  
  background-color: #fff;
  border-radius: 20px;
  
  /* Размер шрифта задан дважды */
  font-size: 12px;
  font-size: 16px;
  line-height: 14px;
}

Чтобы минимизировать количество таких ошибок, программисты придумали стили кодирования — стандарты оформления кода. В них описывают, как форматировать, структурировать и организовывать код и комментарии, какую использовать систему именования, какого кода стоит избегать.

Стили кодирования — отличные учебники для начинающих. Чтобы научиться писать чистый и поддерживаемый код на ХТМЛ и ЦСС, советую изучить популярные стили кодирования:

Линтеры

Чтобы за стилем кодирования следили роботы, а не люди, программисты придумали линтеры — программы, автоматически проверяющие код на соответствие выбранному стилю кодирования.

Большая часть линтеров подсказывает исправления прямо в редакторе и по просьбе могут самостоятельно поправить код:

Рубокоп, линтер для Руби, подсказывает, что фигурным скобкам не хватает пробелов
Линтер, встроенный в Кодпен, нашёл ошибку в атрибуте

Другие — не дают сохранить код в репозиторий, если у него есть проблемы со стилем. Третьи — автоматически форматируют код при его сохранении:

Prettier, линтер Яваскрипта, автоматически форматирует код при сохранении

Советую, если есть возможность, использовать линтеры последнего типа: они прилично экономят время и быстрее помогают находить ошибки.

Ещё по теме

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы