Skip to content

Latest commit

 

History

History
267 lines (224 loc) · 13.9 KB

README.ua.md

File metadata and controls

267 lines (224 loc) · 13.9 KB

English | Українська | Pусский

HTML рекомендації та найкращі практики

Надавайте перевагу меншій кількості елементів над більшою

Великі блоки HTML складніше читати, розуміти та підтримувати. Окрім цього, великий DOM може негативно впливати на продуктивність.

Уникайте

<div class="outer-margin">
  <div class="inner-padding">
    <p>Ані муки, ні кайдани — Дух зломить не зможуть твій.</p>
  </div>
</div>

Надавайте перевагу

<div class="description">
  <p>Ані муки, ні кайдани — Дух зломить не зможуть твій.</p>
</div>

Надавайте перевагу елементам, що мають відповідне семантичне значення над елементами загального призначення

Семантично коректний HTML легше читати, розуміти та підтримувати. Це краще з точки зору доступності, нариклад для програм читання з екрану. Не кажучи вже про роботів та всіляких парсерів, включаючи пошукових ботів.

Уникайте

<span>20 хвилин тому.</span>

Надавайте перевагу

<time datetime="2020-09-01T20:00:00">20 хвилин тому.</time>

Надавайте перевагу прогресивному покращенню і спрощенню над складними та костурбатими рішеннями

Таким чином ми матимемо надійне рішення, а користувач водночас отримає максимум, який дозволяє його платформа, від програмного продукту.

Уникайте

<p data-lines="3" class="abstract">Коли замовкли стріли пістолів і одспівали весілля, а жінка пригнала до загороди вівці й корови, Іван був задоволений навіть. Його Палагна була з багацького роду, фудульна, здорова дівка, з грубим носом й воластою шиєю. Правда, вона любила пишне лудіння, і немало десь піде грошей на шовкові хустки та дорогі згарди, але то байка! Поглядаючи на овечки, що блеяли в загородах, на свій писаний ботей (стадо), на корови, що дзвонили та рули по випасах в лісі,— він не журився.</p>
<style>
  .abstract {
    width: 20rem;
    font-size: 0.75rem;
    line-height: 1rem;
  }
</style>
<script>
  const truncateElement = document.querySelector('.abstract');
  const truncateText=truncateElement.textContent;
  const lines = parseInt(truncateElement.dataset.lines);
  const getLineHeight = function(element) {
    const lineHeight = window.getComputedStyle(truncateElement)['line-height'];
    if (lineHeight === 'normal') {
      return 1.16 * parseFloat(window.getComputedStyle(truncateElement)['font-size']);
    } else {
      return parseFloat(lineHeight);
    }
  }
  truncateElement.innerHTML= truncateText;
  const truncateTextParts= truncateText.split(' ');
  const lineHeight = getLineHeight(truncateElement);
  
  while(lines * lineHeight < truncateElement.clientHeight) {
    truncateTextParts.pop();
    truncateElement.innerHTML = truncateTextParts.join(' ') + '…';
  }
</script>

Надавайте перевагу

<p class="abstract">Коли замовкли стріли пістолів і одспівали весілля, а жінка пригнала до загороди вівці й корови, Іван був задоволений навіть. Його Палагна була з багацького роду, фудульна, здорова дівка, з грубим носом й воластою шиєю. Правда, вона любила пишне лудіння, і немало десь піде грошей на шовкові хустки та дорогі згарди, але то байка! Поглядаючи на овечки, що блеяли в загородах, на свій писаний ботей, на корови, що дзвонили та рули по випасах в лісі,— він не журився.</p>
<style>
  .abstract {
    width: 20rem;
    font-size: 0.75rem;
    line-height: 1rem;
    max-height: 3rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
</style>

Надавайте перевагу нативному над кастомним

Майже неможливо зробити UX кращим за той, який забезпечують розробники браузерів. Ми не маємо їх ресурсів: ні часу, ні людей. Неможливо знайти всі підводні камені, пов'язані з вирішенням конкретної проблеми. Не кажучи вже про те, що нативні елементи зазвичай значно продуктивніші.

  1. Створення кастомного рішення потребує значно більше часу, ніж використання нативного.
  2. Кастомне рішення неможливо так само глибоко інтегрувати із системою, як нативне.
  3. Ми не контролюємо зовнішні залежності.
  4. Зовнішні рішення часто-густо погано впливають на розмір бандла.
  5. Неможливо передбачити, де виникнуть проблеми в зовнішньому рішенні, чи воно доступне, що з локалізацією та інтернаціоналізацією.
  6. Нативним елементам не потрібне завантаження JS-бандлів. Отже, вони готові до використання одразу як завантажиться HTML.
  7. Продуктивність нативних елементів зазвичай значно краща, ніж кастомних.
  8. Нові можливості та виправлені помилки користувач отримує з оновленням браузеру.
  9. Розробникам легше працювати з нативним рішенням, ніж з кастомним. Бо воно стандартизоване і поширене.

Уникайте

<div class="details">
  <h2>Cокира</h2>
  <div class="details-content">
    Вони обоє знали, що то бродить по лісі невидима сокира, гупа об дерева і хека з втомлених грудей. Ляк проганяв їх звідти в долину, де потік плив спокійніше. Вони робили собі курбало у потоці, глибоке місце, і, роздягтись, бовтались в нім, як двоє лісних звірят, що не знають, що таке сором. Сонце спочивало на їх яснім волоссі і било в очі, а льодова вода потоку щипала тіло.
  </div>
</div>
<script>
  const toggler = (event) => {
    event.currentTarget.parentNode.classList.toggle("details-open");
  }
  document.querySelectorAll(".details").forEach((element) => {
    element.querySelector("h2").addEventListener("click", toggler);
  });
</script>
<style>
  .details h2 {
    all: unset;
  }
  .details h2::before {
    content: "►";
    margin-right: .5em;
    font-size: small;
    display: inline;
  }
  .details .details-content {
    display: none;
  }
  .details.details-open .details-content {
    display: block;
  }
  .details.details-open h2::before {
    content: "▼";
  }
</style>

Надавайте перевагу

<details>
  <summary>Cокира</summary>
  Вони обоє знали, що то бродить по лісі невидима сокира, гупа об дерева і хека з втомлених грудей. Ляк проганяв їх звідти в долину, де потік плив спокійніше. Вони робили собі курбало у потоці, глибоке місце, і, роздягтись, бовтались в нім, як двоє лісних звірят, що не знають, що таке сором. Сонце спочивало на їх яснім волоссі і било в очі, а льодова вода потоку щипала тіло.
</details>

Надавайте перевагу валідному коду

Навіть якщо у вашому браузері все виглядає добре, у браузері користувача сторінка може виглядати зламаною, бо корекція помилок працює по-різному в різних браузерах. Окрім цього, це може збити з пантелику розробників, котрі будуть супроводжувати ваш код. Потенційно валідний HTML може бути корисним з точки зору пошукової оптимізації та доступності.

Уникайте

<dl>
  <h1>Словник</h1>

  <dt>Котюга</dt>
  <dd>Пес</dd>

  <dt>Дроб'єта</dt>
  <dd>Вівці і кози, дрібна худоба</dd>

  <dt>Помана</dt>
  <dd>Посмертний дарунок, спадщина худобою. Це від слів «поминати, згадувати»</dd>
</dl>

Надавайте перевагу

<h1>Словник</h1>

<dl>
  <dt>Котюга</dt>
  <dd>Пес</dd>

  <dt>Дроб'єта</dt>
  <dd>Вівці і кози, дрібна худоба</dd>

  <dt>Помана</dt>
  <dd>Посмертний дарунок, спадщина худобою. Це від слів «поминати, згадувати»</dd>
</dl>

Надавайте перевагу презентації, відокремленій від структури

Легше розуміти та підтримувати код, у якому структура та презентація відокремлені. Це краще для доступності. Добре з точки зору пошукової оптимізації.

Уникайте

<nav class="breadcrumbs">
  <ol>
    <li><a href="/home/">Головна</a></li>
    <li>&rarr;</li>
    <li><a href="/home/cluster/">Кластер</a></li>
    <li>&rarr;</li>
    <li>Сервіс</li>
  </ol>
</nav>

<style>
  .breadcrumbs ol{
    display: flex;
    list-style: none;
    align-items: center;
  }
  .breadcrumbs li{
    margin: 0 5px 0 0;
  }
</style>

Надавайте перевагу

<nav class="breadcrumbs">
  <ol>
    <li><a href="/home/">Головна</a></li>
    <li><a href="/home/cluster/">Кластер</a></li>
    <li>Сервіс</li>
  </ol>
</nav>

<style>
  .breadcrumbs ol{
    display: flex;
    list-style: none;
    align-items: center;
  }
  .breadcrumbs li:not(:last-child):after {
    content: "→";
    margin: 0 5px;
    pointer-events: none;
  }
</style>