Акуратність коду

Акуратний код легко читати та розбирати на окремі елементи.

Всі внутрішні елементи (діти першого порядку) по відношенню до батьківського повинні мати однаковий відступ, використовуйте для цього клавішу Tab, не використовуйте пробіли.

Великі блоки можна відділяти в коді пустими строками для полегшення навігації по коду.

Часто для цього використовують коментарі виду:

<!-- Header begin -->
<div class="header">
  ...
</div>
<!-- Header end -->

Але я вважаю, що вдало названі блоки і задані класи цілком і повністю будуть описувати контент поточного блока.

Приклади хорошого і поганого оформлення кода:

HTML code
HTML-код, акуратний та аби як зроблений

В HAML-коді (як і в багатьох сучасних мовах програмування) неакуратний код просто не буде працювати: вкладення тегів один в один визначається виключно відступами:

HAML code
HAML-код - завжди акуратний

В сучасних IDE є функція, що автоматично відформатовує код. Наприклад, в jsFiddle вона називається "Tidy", в PHPStorm знаходиться в меню Code (Ctrl + Alt + L):

Реформатування коду в PHPStorm
Реформатування коду в PHPStorm

Принцип бритви Оккама - рос.: "не плоди сущее без необходимости", тобто, не треба створювати зайвих елементів, які не несуть ніякого змісту. Якщо 2 блока можна об’єднати в один - це варто зробити.

Звичайно, не треба прагнути до принципового мінімалізму, часто зменшення HTML-коду збільшує CSS-код і навпаки. Або деякі фрагменти можна зробити економно, але дуже неочевидними способами, в яких важко розібратися, які важко пристосувати до інших умов.

Валідатор - це програма, що перевіряє правильність коду. В сучасних IDE його можна зустріти у версіях з коробки або скачати у вигляді плагіна.

Валідний та невалідний код
Валідний та невалідний код в PHPStorm

До появи зручних IDE кожний файл потрібно було перевірити онлайн-валідатором.

Спробуйте на своїх файлах валідатор для HTML та для CSS щоб ознайомитися як він працює, яку інформацію видає, що пропонує змінити.

Порядок стилів

Порівняйте дві пари блоків зі стилями. Дайте відповідь - які варіанти кращі і чому.

Варіант 1:

p.title { padding:4px 10px;border: 1px solid  red;color: red;   display: inline-block; margin:0;  font-size: 14px; background:#eee; border-radius: 4px; text-decoration:none;}

.menu li{
border-right-color:  red;
  color: red;
  list-style:none;
   padding:  0 0 0 24px;
 font-style:italic;
  background-image: url(img/red_li.png);

  border-left-color: red;
  text-transform:uppercase;
  margin-bottom:  4px;  
   }

Варіант 2:

p.title { display: inline-block; margin: 0; padding: 4px 10px; color: red; font-size: 14px; text-decoration: none; background: #eee; border: 1px solid red; border-radius: 4px;}

.menu li {
  list-style: none;
  margin-bottom: 4px;
  padding: 0 0 0 24px;
  color: red;
  font-style: italic;
  text-transform: uppercase;
  background-image: url(img/red_li.png);
  border-left-color: red;
  border-right-color: red;
}

Для того, щоб стилі легко було читати, знаходити потрібне, дотримуйтесь такого порядку запису стилів:

  1. глобальні стилі, пов'язані з позиціонуванням блоку
  2. блочні стилі
  3. стилі шрифта
  4. фон, границі
  5. рідко вживані стилі

Використовуйте нову строку для кожного селектора, якщо селекторів декілька.

Використовуйте табуляцію у випадку запису в стовбчик.

Використовуйте пробіли між стилем і його значенням, перед відкриваючою фігурною дужкою.

Шаблон стилів:

selector1,
selector2,
selector3 {
  position: relative;
  left, top, right, bottom
  z-index
  display
  list-style
  box-sizing
  margin, padding
  width, height
  color
  font*
  text*
  background*
  border*
  border-radius
  cursor
  opaticy
  overflow
  user-select
  transform
  transition
}

Селектори повинні розширятися до низу, а також бути згруповані в одному місці, а не розкидані по файлу, якщо належать одному й тому ж блоку:

.navigation { ... }
.navigation .menu { ... }
.navigation .menu li { ... }
.navigation .menu li:hover,
.navigation .menu li.active { ... }
.navigation .menu li:hover a,
.navigation .menu li.active a { ... }

.navigation .menu li:hover a,
.navigation .menu li.active a { ... }
p.title { ... }
.navigation .menu { ... }
.navigation .menu li:hover,
.navigation .menu li.active { ... }
.section-contacts { ... }
.navigation .menu li { ... }
.navigation { ... }

Домашнє завдання

  1. Перевірте свій HTML-код і CSS за допомогою онлайн-валідаторів. Зробіть деякі помили, приберіть атрибути alt у зображень і повторно зробіть перевірку.
  2. Приведіть свій HTML та CSS у належний, акуратний вигляд.