НАЙКРАЩІ СУЧАСНІ ПРАКТИКИ HTML та CSS

Вступ до HTML

HTML (HyperText Markup Language) — основна мова розмітки для створення веб-сторінок. Вона структурує контент і визначає його семантику.

Вступ до CSS

CSS (Cascading Style Sheets) використовується для опису візуальної презентації HTML-документів. Вона відповідає за макет, кольори, шрифти та інші стилістичні аспекти.

HTML Best Practices

Ми розглянемо найкращі практики, які допоможуть створювати чистий, семантичний та ефективний HTML-код.

Завжди оголошуйте Doctype

Doctype визначає стандарт, за яким браузер буде рендерити ваш документ. Це перший рядок у вашому HTML-документі.

Код: Doctype

<!DOCTYPE html>

Чому це важливо?

Забезпечує коректне відображення сторінки
Уникає переходу в режим "Quirks Mode"
Полегшує сумісність між різними браузерами

Використовуйте атрибут lang:

Атрибут lang в HTML вказує мову вмісту елемента. Це важливо для доступності та SEO.

Приклад використання:

<html lang="uk"></html>

Використовуйте змістовні Title Tags

Тег <title> важливий для SEO та користувацького досвіду. Він відображається у вкладці браузера та результатах пошуку.

Код: Title Tag

<title>Інформація про веб-розробку та дизайн</title>

Використовуйте описові Meta Tags

Meta теги допомагають пошуковим системам краще розуміти ваш контент.

Код: Meta Description

<meta
  name="description"
  content="Блог про веб-розробку та дизайн, присвячений створенню веб-сайтів."
/>

Код: Meta Keywords

<meta name="keywords" content="веб-дизайн, веб-розробка" />

Використовуємо іконку для сторінки

<link rel="icon" href="favicon.ico" type="image/x-icon" />

Використовуйте контейнери для розділення макету на основні секції

Розділення сторінки на основні секції робить код чистішим та легшим для читання.

Код: Розділення на секції

<header>
  <!-- Контент заголовка -->
</header>
<main>
  <!-- Основний контент -->
</main>
<footer>
  <!-- Контент підвалу -->
</footer>

Відокремлюйте контент від презентації

HTML відповідає за контент, а CSS — за його візуальне представлення. Не використовуйте inline стилі.

Погана практика: Inline стилі

<p style="color:#abc; font-size:14px; font-family:arial,sans-serif;">
  Я не хочу розділяти контент від презентації
</p>

Хороша практика: Зовнішній CSS

<p class="intro">Я хочу розділити контент від презентації</p>

/* styles.css */
.intro {
  color: #abc;
  font-size: 14px;
  font-family: Arial, sans-serif;
}

Використовуйте змінні в CSS

:root {
  --text-color: #abc;
  --text-size: 1rem;
  --text-font: Arial, sans-serif;
}

.intro {
  color: var(--text-color);
  font-size: var(--text-size);
  font-family: var(--text-font);
}

Мінімізуйте та об'єднуйте CSS

Мінімізація CSS зменшує розмір файлів, а об'єднання зменшує кількість HTTP-запитів, що прискорює завантаження сторінки.

Інструменти для мінімізації CSS

Мінімізуйте, об'єднуйте та перемістіть JavaScript

Як і CSS, мінімізуйте та об'єднуйте JS файли. Розміщуйте їх внизу документа перед закриваючим тегом </body>.

Код: Завантаження JavaScript

<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="UTF-8" />
    <title>Приклад сторінки</title>
    <link rel="stylesheet" href="styles.min.css" />
  </head>
  <body>
    <!-- Контент сторінки -->

    <script src="scripts.min.js"></script>
  </body>
</html>

Розумне використання заголовків

Використовуйте <h1> до <h6> для позначення ієрархії контенту, що допомагає SEO та доступності.

Код: Заголовки

<h1>Головний заголовок</h1>
<section>
   <h2>Заголовок частини сторінки</h2>
   <article>
     <h3>Заголовок ще однієї частини
   </article>
</section>

Використовуйте `h1` один раз на сторінці

Тег h1 згідно з SEO-рекомандаціями має бути використаний один раз

Використовуйте правильний HTML елемент у потрібному місці

Використовуйте семантичні елементи, такі як <em>, <strong>, <p>, <ul>, <ol>, <dl> тощо.

Код: Семантичні елементи

<p>Це абзац тексту.</p>
<ul>
  <li>Пункт списку</li>
  <li>Ще один пункт</li>
</ul>
<em>Виділений текст</em>
<strong>Сильніше виділений текст</strong>

Не використовуйте `div` для всього

Використовуйте <div> лише тоді, коли немає більш семантичного елемента.

Погана практика: Зайві `div`

<div class="container">
  <div class="row">
    <div class="col">
      <!-- Контент -->
    </div>
  </div>
</div>

Гарна практика: семантичні елементи

<article class="container">
  <section class="row">
    <div class="col">
      <!-- Контент -->
    </div>
  </section>
</article>

Хороша практика: Семантичні елементи

<header>
  <!-- Контент заголовка -->
  <nav>
    <!-- Навігація -->
  </nav>
</header>
<main>
  <!-- Основний контент -->
  <section>
    <!-- Секція контенту -->
  </section>
</main>
<footer>
  <!-- Контент підвалу -->
</footer>

Використовуйте Unordered List (ul)

для навігації

Семантичний та доступний спосіб створення навігаційних меню.

Код: Навігація з ul

<nav>
  <ul id="main_nav">
    <li><a href="#" class="active">Головна</a></li>
    <li><a href="#">Про нас</a></li>
    <li><a href="#">Портфоліо</a></li>
    <li><a href="#">Послуги</a></li>
    <li><a href="#">Блог</a></li>
    <li><a href="#">Контакти</a></li>
  </ul>
</nav>

Код: Стилізація навігації з CSS

#main_nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
}
#main_nav li a {
  text-decoration: none;
  padding: 10px 15px;
  background-color: #333;
  color: #fff;
  border-radius: 5px;
}
#main_nav li a.active,
#main_nav li a:hover {
  background-color: #555;
}

Закривайте всі теги

Відповідність стандартам W3C включає закриття всіх тегів.

Код: Закриті теги

<div id="test">
  <img src="images/sample.jpg" alt="зразок" />
  <a href="#" title="тест">тест</a>
  <p>якийсь зразок тексту</p>
</div>

Використовуйте нижній регістр для розмітки

Нижній регістр покращує читабельність та відповідає стандартам.

Погана практика: Верхній регістр

<DIV>
  <img src="images/Sample.jpg" alt="зразок" />
  <a href="#" title="ТЕСТ">тест</a>
  <p>якийсь зразок тексту</p>
</DIV>

Хороша практика: Нижній регістр

<div id="test">
  <img src="images/sample.jpg" alt="зразок" />
  <a href="#" title="тест">тест</a>
  <p>якийсь зразок тексту</p>
</div>

Використовуйте атрибут alt з зображеннями

Атрибут alt забезпечує доступність та SEO покращення.

Погана практика: Відсутній або беззмістовний alt

<img id="logo" src="images/bgr_logo.png" />
<img id="logo" src="images/bgr_logo.png" alt="bgr_logo.png" />

Хороша практика: Описовий alt

<img id="logo" src="images/bgr_logo.png" alt="Some Company Logo" />

Використовуйте атрибут title з посиланнями (за потреби)

Атрибут title покращує доступність, коли використовується правильно.

Погана практика: Зайвий title

<a href="http://blog.com/all-articles" title="Натисніть тут">Натисніть тут.</a>

Хороша практика: Описовий title

<a href="http://blog.com/all-articles" title="Список усіх статей"
  >Натисніть тут.</a
>

Використовуйте Fieldset та Labels у формах

Полегшує розуміння та доступність форм.

Код: Використання Fieldset та Labels

<fieldset>
  <legend>Особисті дані</legend>
  <label for="name">Ім'я</label>
  <input type="text" id="name" name="name" />

  <label for="email">Електронна пошта</label>
  <input type="email" id="email" name="email" />

  <label for="subject">Тема</label>
  <input type="text" id="subject" name="subject" />

  <label>Повідомлення
     <textarea name="message" rows="5"></textarea>
  </label>
</fieldset>

Використовуйте srcset для зображень

Забезпечує адаптивність зображень на різних пристроях.

Код: Використання srcset

<img
  src="small.jpg"
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
  alt="Приклад адаптивного зображення"
/>

Валідуйте свій код

Регулярна валідація допомагає знаходити та виправляти помилки.

Інструменти для валідації

Пишіть консистентно відформатований код

Чистий та добре відформатований код покращує читабельність та підтримку. Використовуйте інструменти автоматичного форматування, наприклад, Prettier.

Приклад форматування

<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="UTF-8" />
    <title>Консистентне форматування</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h1>Вітаємо!</h1>
    </header>
    <main>
      <p>Це приклад добре відформатованого HTML-коду.</p>
    </main>
    <footer>
      <p>© Some company</p>
    </footer>
  </body>
</html>

Уникайте надмірних коментарів

Коментарі повинні пояснювати складну логіку, а не кожен рядок HTML.

Погана практика: Надмірні коментарі

<!-- Початок заголовка -->
<header>
  <!-- Логотип -->
  <img src="logo.png" alt="Логотип" />
  <!-- Навігація -->
  <nav>
    <!-- Посилання на головну -->
    <a href="#">Головна</a>
  </nav>
</header>

Хороша практика: Мінімальні коментарі

<header>
  <img src="logo.png" alt="Логотип" />
  <nav>
    <a href="#">Головна</a>
  </nav>
</header>

Використовуйте Open Graph

Open Graph покращує представлення вашого сайту у соціальних мережах.

Код: Open Graph мета теги

<meta property="og:title" content="Веб-розробка та дизайн" />
<meta
  property="og:description"
  content="Блог про веб-розробку та дизайн, присвячений створенню веб-сайтів."
/>
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com" />

Використовуйте Google HTML/CSS Style Guide

Дотримання стилю Google покращує якість та консистентність вашого коду. https://google.github.io/styleguide/htmlcssguide.html

CSS Best Practices

Перейдемо до найкращих практик CSS для створення ефективного та підтримуваного стилю.

Використовуйте зовнішні CSS файли

Зберігайте стилі в окремих файлах для покращення організації та кешування.

Код: Зовнішній CSS

<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="UTF-8" />
    <title>Зовнішній CSS</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p>Приклад використання зовнішнього CSS.</p>
  </body>
</html>

Організовуйте CSS за методологією

Використовуйте методології як BEM (Block, Element, Modifier) для покращення структурування.

Приклад BEM

/* Блок */
.button {
}

/* Елемент */
.button__icon {
}

/* Модифікатор */
.button--primary {
}

Використовуйте Flexbox для розміщення елементів, коли немає потреби в Grid

Flexbox спрощує створення гнучких та адаптивних макетів.

Код: Flexbox

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div class="container">
  <div>Елемент 1</div>
  <div>Елемент 2</div>
  <div>Елемент 3</div>
</div>

Використовуйте CSS Grid для макетів де потрібна сітка

CSS Grid дозволяє створювати складні двовимірні макети.

Код: CSS Grid

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

<div class="grid-container">
  <div>Стовпець 1</div>
  <div>Стовпець 2</div>
  <div>Стовпець 3</div>
</div>

CSS Subgrid для вкладених сіток

CSS Subgrid дозволяє вкладати сітки для складних макетів.

.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(3, 80px);
}

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid

Адаптивний дизайн

Створюйте сайти, які добре виглядають на різних пристроях за допомогою медіа-запитів.

Код: Медійні запити

@media (min-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Використовуйте змінні CSS

CSS змінні покращують керованість та повторне використання стилів.

Код: CSS змінні

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --text-font: Arial, sans-serif;
}

.button {
  background-color: var(--primary-color);
  color: #fff;
  font-family: var(--text-font);
}

.button-secondary {
  background-color: var(--secondary-color);
  color: #fff;
}

Мінімізуйте використання !important

Використання !important ускладнює підтримку коду. Уникайте його, де це можливо.

Погана практика: Використання !important

.button {
  background-color: red !important;
}

Хороша практика: Специфічність селекторів

/* Збільшення специфічності замість використання !important */
.navbar .button {
  background-color: red;
}

Сучасна хороша практика: вкладені селектори

/* Збільшення специфічності замість використання !important */
.navbar {
  .button {
    background-color: red;
  }
}

Оптимізуйте продуктивність CSS

Мінімізуйте CSS файли, уникайте зайвих селекторів та використовуйтесь сучасні техніки.

Виявляйте CSS, що не використовується

Ctrl + Shift + J в Chrome для виявлення не використовуваних стилів.

Інструменти для оптимізації CSS

Використовуйте відповідні одиниці виміру

Використовуйте rem (та за потреби em) для гнучких та адаптивних розмірів шрифтів.

Код: Використання rem та em

html {
  font-size: 16px;
}

body {
  font-size: 1rem; /* 16px */
}

h1 {
  font-size: 2em; /* 32px */
}

Забезпечуйте високу доступність (Accessibility)

Використовуйте достатній контраст, семантичні елементи та підтримуйте навігацію клавіатурою.

Приклад контрасту

.text {
  color: #333;
  background-color: #fff;
}

Використовуйте CSS трансформації та анімації з розумом

Трансформації та анімації можуть покращити UX, але не повинні заважати користувачам.

Код: CSS анімація

.button {
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #555;
}

Використовуйте адаптивні зображення та медіа

Забезпечте швидке завантаження та якість на різних пристроях.

Код: Адаптивні зображення з srcset

<img
  src="small.jpg"
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
  alt="Приклад адаптивного зображення"
/>

Використовуйте Flexbox та Grid разом

Комбінування Flexbox та Grid дозволяє створювати складні макети з мінімальними зусиллями.

Код: Flexbox та Grid разом

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

<div class="container">
  <aside class="sidebar">
    <button>Кнопка 1</button>
    <button>Кнопка 2</button>
  </aside>
  <main>
    <p>Основний контент.</p>
  </main>
</div>

Використовуйте сучасні CSS властивості

Використовуйте властивості як CSS Variables, Custom Properties, Grid, Flexbox для покращення коду.

Код: CSS Variables

:root {
  --main-bg-color: #f0f0f0;
}

body {
  background-color: var(--main-bg-color);
}

Використовуйте медіа-запити для світлої/темної тем

Забезпечте підтримку темної теми за допомогою медіа-запитів.

Код: Темна тема

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #ffffff;
  }
}

Використовуйте CSS інструменти для побудови

Інструменти як PostCSS, Autoprefixer, та інші можуть покращити робочий процес.

Приклад використання Autoprefixer

npx autoprefixer styles.css -o styles.prefixed.css

Документуйте свій CSS

Використовуйте коментарі для пояснення складних частин стилів.

Приклад коментарів

/* Основні стилі для кнопок */
.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

Використовуйте модульні CSS файли

Розбивайте CSS на модулі для покращення організації та підтримки.

Структура модульних CSS

styles/
├── base/ │
├── reset.css │
└── typography.css
├── components/ │
├── button.css │
└── navbar.css
├── layout/ 
│ 
├── grid.css 
│ 
└── header.css 
└── main.css

Використовуйте інструменти для автоматизації

Інструменти як Webpack, Gulp або Parcel можуть автоматизувати процеси зборки та оптимізації.

Приклад Gulp для автоматизації CSS

const gulp = require("gulp");
const cssnano = require("gulp-cssnano");

gulp.task("minify-css", () => {
  return gulp.src("styles/*.css").pipe(cssnano()).pipe(gulp.dest("dist/css"));
});

Використовуйте сучасні фреймворки

Фреймворки як Bootstrap, Tailwind CSS можуть пришвидшити розробку та забезпечити консистентність.

Приклад використання Tailwind CSS

<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="UTF-8" />
    <title>Tailwind CSS Приклад</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <body class="bg-gray-100">
    <button
      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
    >
      Натисни мене
    </button>
  </body>
</html>

Використовуйте PostCSS для розширення можливостей CSS

PostCSS дозволяє використовувати сучасні CSS функції та плагіни для автоматизації.

Приклад використання PostCSS

// postcss.config.js
module.exports = {
  plugins: [
    require("autoprefixer"),
    require("cssnano")({
      preset: "default",
    }),
  ],
};

Сучасні інструменти для розробки

Розглянемо інструменти, які допомагають у розробці HTML та CSS.

Інструменти для розробки

Редактори коду: Cursor, VS Code, GitHub Codespaces
Інспектори елементів: DevTools у браузерах
Інструменти валідації: W3C Markup Validation Service
PageSpeed Insights https://pagespeed.web.dev/
Інструменти оптимізації: CSSNano, Autoprefixer
Інструменти автоматизації: Gulp, Webpack, Parcel