====== Рекомендації ======
===== HTML =====
  * Список - це тільки список ОДНОТИПНИХ єлементів - однакових
  * Якщо актив - то це кнопка - а якщо прото посилання - то а з href
  * Прямо в <li> не красиво (дурний тон) писати прямо текст, требу у відповідний тег
  * Для картинок краще відразу у ХТМЛ задати задані розміри ширину і воту, а потім у КСС їх перебивати. Тоді при первісному завантаженні одразу будуть квадратики правильних розмірів
  * графічні формати (які можуть) можна конвертувати у progresiv - тоді картинки будуть при поганому інтернеті хоть потрошку завантажуватись і відразу показуватись
  * Якщо при вказанні переходу по якрою # не писати далі куда а залишити просто # - то перейде до верху
  * Модальне вікно краще описувати внизу після футеру
===== CSS =====
  * line-height = краще писати не абсолюними значеннями а рзраховувати line-height / font-size = 1.11 (два знаки після коми) (без em)
  * letter-spacing = краще писати не абсолюними значеннями а рзраховувати letter-spacing / font-size = 1.11 (два знаки після коми) -0.54em; 
  * На один єлемент при вказанні классів можна через пробіл додавати додатковий клас у котрому будуть вже щось загальне вказано
  * [[Скидання властивостей CSS]]
  * Колапсування вертикальних маржинів - Вертикальні маржини сусідніх блокових елементів не складаються. Якщо є два елемента з різними значеннями властивості margin, вибирається найбільший margin із двох. Колапсування маржинів відбувається лише для блокових елементів. Верхні та нижні маржини на стику з батьківьским блоком ніби пробивають його й випадають назовні. Це одна з найчастіших помилок верстки. Робіть маржини лише між двома сусідніми елементами.
  * Проміжок рядкових елементів - У рядкових та рядково-блочних елементів є правий проміжок. Це не margin або padding, а буквально порожнє місце. Це особливість того, як браузер розташовує рядковий контент у рядку. За умовчанням буде проміжок 4px — 1/4 розміру шрифту найближчого батьківського елемента.
  * Щоб у зображенні придбати нижній і правий відступ - достатнього з нього зробити блоковим елемен
  * Усі секії (section) ідуть впритик, тому там тільки padding
  * Краще робити контейнер <div> з запасом у 15px
  * Щоб поставити кнопку по центру - зробити кнопку блочнойю (дисплей блок) и поставити мражин 0 авто
  * Якщо розмір кнопки залежить від тексту - пишемо паддінг, якщо кнопки повинні одного розміру - то задаємо розміри
  * 2D-трансформації - CSS-переходи, CSS-анімації, а тепер ще й 2D трансформації.CSS-переходи і CSS-анімації відрізняються кількістю налаштованих станів. 2D-трансформації — це зовсім інша справа. Вони не про “як” (2 стани чи багато кадрів), а про то “які властивості” змінюються. 2D-трансформації змінюють елементи у двовимірному просторі та можуть використовуватися і в CSS-переходах, і в CSS-анімації. А ще вони добре сприймаються браузером!
  * Модальне вікно краще описувати внизу після футеру
  * Для хеадера краще ставити z-index 1000 щоб він завжди був зверху
  * Для заголовків модалок краще використовувати <p> а не <h>
  * Щоб позиціювання поставити одному елементк absolute - то батьківському елементу треб поставити position:relative