Як правильно форматувати (стилізувати) код HTML, CSS

Привіт:) У цьому пості покажу як правильно стилізувати код HTML та CSS для легшого його розуміння та подальшого розширення.

Зміст

Для будь-якої мови програмування існують так звані "best practices" стилізації та оформлення, у яких пропонуються основні правила форматування рядків коду. Дотримання цих рекомендацій дозволить розробнику легше орієнтуватись у своєму або чужому коді, тратити менше часу на його розуміння і швидше досягати результату.

Код

Групування файлів проєкту

  1. Файли схожих типів групуйте у папки: скрипти, стилі, шрифти, зображення.
  2. Якщо у каталозі стає багато файлів, виділіть підгрупи із вкладеними папками.
<!-- ПОГАНО -->

project/
  assets/
    reset.css
    style.css
    Roboto-Bold.woff
    Roboto-Regular.woff
    Roboto-Medium.woff
    logo.png
    background.png
    telegram-icon.svg
    facebook-icon.svg
    script.js
  index.html

<!-- ДОБРЕ -->

project/
  assets/
    css/
      reset.css
      style.css
    fonts/
      Roboto-Bold.woff
      Roboto-Regular.woff
      Roboto-Medium.woff
    images/
      logo.png
      background.png
      telegram-icon.svg
      facebook-icon.svg
    js/
      script.js
  index.html
до змісту ↑

Форматування коду

<!-- ПОГАНО -->

<ul>
→ <li>Пункт</li>
∙∙∙∙<li>Пункт</li>∙∙∙∙∙∙∙
</ul>

<!-- ДОБРЕ -->

<ul>
∙∙<li>Пункт</li>
∙∙<li>Пункт</li>
</ul>

HTML

Базові частини розмітки

Мінімальна обов'язкова структура HTML-документів наступна:

  • сучасний тип документу <!DOCTYPE html>
  • кореневий елемент <html> з мовою документу lang
  • метаінформація <head>
  • заголовок документу <title>
  • кодування документу <meta charset="utf-8">
  • тіло документу <body>.
<!-- ПОГАНО -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <title>Заголовок</title>
  Сторінка
</html>

<!-- ДОБРЕ -->

<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Заголовок</title>
  </head>
  <body>Сторінка</body>
</html>
до змісту ↑

Регістр тегів й атрибутів

  1. Імена тегів, атрибути та їх значення прописуйте малими буквами.

Виняток: атрибути для SVG-елементів, наприклад: viewBox, preserveAspectRatio та інші.

<!-- ПОГАНО -->

<UL>
  <LI>Перший</LI>
  <LI>Другий</LI>
  <LI>Третій</LI>
</UL>

<IMG class="IMAGE" SRC="images/picture.png" WIDTH="800" HEIGHT="300" ALT="Троянда в полі.">

<!-- ДОБРЕ -->

<ul>
  <li>Перший</li>
  <li>Другий</li>
  <li>Третій</li>
</ul>

<img class="image" src="images/picture.png" width="800" height="300" alt="Троянда в полі.">
до змісту ↑

Форматування тегів

  1. Вкладеність тегів позначається переносами та відступами.
  2. Кожен новий вкладений тег переноситься на окремий рядок із відступом, окрім текстових елементів.
  3. Текст усередині тегів залишається на одному рядку з тегами.
<!-- ПОГАНО -->

<div class="menu"><ul>
  <li><a href="">
    Перший
  </a></li>
  <li><a href="">Другий
  </a></li>
</ul></div>

<!-- ДОБРЕ -->

<div class="menu">
  <ul>
    <li>
      <a href="">Перший</a>
    </li>
    <li>
      <a href="">Другий</a>
    </li>
    <li>
      <a href="">Третій</a>
    </li>
  </ul>
</div>

<p><a href="#">За цим посиланням</a> ви знайдете повний список крутих та унікальних зображень нових героїв мультфільму, а в <a href="#">цьому</a> їх опис.</p>
<p>А ще в <i>тексті</i> можете побачити <b>ЦЕ</b> відео.</p>
до змісту ↑

Подвійні та одиничні теги

  1. Подвійні теги повинні мати відкриваючий та закриваючий теги.
  2. Одиничні теги не мають закриваючого тегу або слешу.
<!-- ПОГАНО -->

<ul>
  <li>Перший
  <li>Другий
  <li>Третій
</ul>

<img src="images/picture.png" width="400" height="400" alt="Троянда в полі." />

<input type="text"></input>

<!-- ДОБРЕ -->

<ul>
  <li>Перший</li>
  <li>Другий</li>
  <li>Третій</li>
</ul>

<img src="images/picture.png" width="400" height="400" alt="Троянда в полі.">

<input type="text" name="name">
до змісту ↑

Порядок атрибутів

  1. Атрибут class йде одразу після імені тегу.
  2. Атрибути йдуть в одному порядку, щоб спростити їхнє читання.
<!-- ПОГАНО -->

<label for="appointment-phone" class="field-group-label">
<input class="field-group-input field" type="text" placeholder="+380 00-00-00" id="appointment-phone" >

<label for="appointment-date" class="field-group-label">
<input id="appointment-date" class="field-group-input field" type="text" placeholder="08.03.2023">

<!-- ДОБРЕ -->

<label class="field-group-label" for="appointment-phone">
<input class="field-group-input field" type="text" id="appointment-phone" placeholder=""+380 00-00-00">

<label class="field-group-label" for="appointment-date">
<input class="field-group-input field" type="text" id="appointment-date" placeholder="08.03.2023">
до змісту ↑

Логічні атрибути

  1. Логічні атрибути записані без значення та в однаковій послідовності у всьому документі.
<!-- ПОГАНО -->

<input type="text" disabled="disabled" required="required">

<!-- ДОБРЕ -->

<input type="text" disabled required>

Форматування атрибутів

  1. У записі атрибутів немає пробілів навколо знака "рівно" =.
<!-- ПОГАНО -->

<input class = "field-group-input field" type = "text" id = "appointment-date" placeholder = "08.03.2023">

<!-- ДОБРЕ -->

<input class="field-group-input field" type="text" id="appointment-date" placeholder="08.03.2023">

Лапки в атрибутах та значеннях

  1. Значення атрибутів записані у подвійних лапках.
  2. Вкладені лапки у значеннях є одинарними.
<!-- ПОГАНО -->

<input class='field-group-input field' type='text' id='appointment-date' placeholder='08.03.2023'>

<input class=field-group-input type=text id=appointment-date placeholder=08.03.2023>

<button class="button" type="button" onclick="show("menu")">
  Меню
</button>

<!-- ДОБРЕ -->

<input class="field-group-input field" type="text" id="appointment-date" placeholder="08.03.2023">

<input class="field-group-input" type="text" id=appointment-date placeholder="08.03.2023">

<button class="button" type="button" onclick="show('menu')">
  Меню
</button>
до змісту ↑

Розміри елементів що заміщуються

  1. У зображень, відео та iframe повинні бути вказані розміри.
  2. За можливості для зображень вказуйте дійсні розміри, оскільки це покращує продуктивність відтворення сторінки: браузер не перемальовуватиме сторінку в процесі завантаження і відображення зображення.
  3. В атрибутах не вказуйте одиниць виміру.
<!-- ПОГАНО -->

<img src="logo.png" alt="">
<img src="logo.png" alt="" width="500px" height="200px">
<svg xmlns="http://www.w3.org/2000/svg"></svg>
<video src="source/video.mp4"></video>
<iframe src="https://maps.google.com"></iframe>

<!-- ДОБРЕ -->

<img src="logo.png" alt="" width="500" height="200">
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"></svg>
<video src="source/video.mp4" width="400" height="400"></video>
<iframe src="https://maps.google.com" width="600" height="600"></iframe>
до змісту ↑

Розділювачі в імені класу

  1. Розділювачами в імені класу є лише дефіси - та підкреслення _. У коді дотримуйтесь одного стилю.
<!-- ПОГАНО -->

<input class="formInput formInputField" type="text">
<input class="form-input form_input_field" type="text">

<!-- ДОБРЕ -->

<input class="form-input form-input-field" type="text">
<input class="form_input form_input_field" type="text">
<input class="form__input form-input__field" type="text">
<input class="form--input form-input--field" type="text">
до змісту ↑

Атрибут method у формі

  1. В атрибуті method зазначайте тип відправлення даних.
<!-- ПОГАНО -->

<form method=""></form>
<form></form>

<!-- ДОБРЕ -->

<form method="post"></form>
<form method="get"></form>

Під'єднання стилів

  1. Файли CSS-стилів повинні бути під'єднані за допомогою <link> усередині <head>. При цьому атрибут type для тегу <link> не вказуйте, оскільки його значення text/css встановлюється за умовчанням.
<!-- ПОГАНО -->

<!DOCTYPE html>
<html lang="uk">
  <head>…</head>
  <body>
    <link rel="stylesheet" href="style.css">
  </body>
</html>

<!-- ДОБРЕ -->

<!DOCTYPE html>
<html lang="uk">
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>…</body>
</html>
до змісту ↑

Під'єднання скриптів

  1. Скрипти під'єднуйте внизу сторінки, щоб під час її завантаження не блокувати відображення вмісту.
  2. При під'єднанні скриптів у тегу <script> атрибут type не вказуйте, оскільки його значення text/javascript встановлюється за замовчуванням.
<!-- ПОГАНО -->

<!DOCTYPE html>
<html lang="uk">
  <head>
    <script src="app.js"></script>
  </head>
  <body>…</body>
</html>

<!-- ДОБРЕ -->

<!DOCTYPE html>
<html lang="uk">
  <head>…</head>
  <body>
    <!-- Вміст сторінки -->
    <script src="app.js"></script>
  </body>
</html>
до змісту ↑

Валідність

  1. Перевіряйте документ на валідність. Для цього використовуйте валідатор https://validator.w3.org/nu/.

CSS

Правило @import

  1. Правило @import працює повільніше, ніж тег <link>. Тому використовуйте останнє.
<!-- ПОГАНО -->

<style>
  @import url("reset.css");
</style>

<!-- ДОБРЕ -->

<link rel="stylesheet" href="reset.css">

Регістр селекторів та властивостей

  1. Селектори та властивості записуйте латинницею та маленькими літерами.
/* ПОГАНО */

.Element {
  Color: #ff0000;
}

.ELEMENT {
  COLOR: #ff0000;
}

.елемент {
  COLOR: #ff0000;
}


/* ДОБРЕ */

.element {
  color: #ff0000;
}

Структура оголошення

  1. Перед фігурною дужкою, що відкривається, має бути пробіл.
  2. Після дужки запис йде з нового рядка.
  3. Властивості стоять в окремих рядках.
  4. Властивості всередині блоку мають один внутрішній відступ.
  5. Після двокрапки стоїть пробіл.
  6. Перед двокрапкою пробіл не потрібен.
  7. Наприкінці оголошення стоїть крапка з комою.
  8. Дужка, що закриває, стоїть у новому рядку та без відступу.
  9. Між блоками правил є один порожній рядок.
/* ПОГАНО */

.block{margin-bottom: 0;
    margin-top: 0;
  font-size: 14px;line-height: 20;
  color :#ff0000}
.element {
  background-color: #000000;
}

/* ДОБРЕ */

.block {
  margin-bottom: 0;
  margin-top: 0;
  font-size: 14px;
  line-height: 20;
  color: #ff0000;
}

.element {
  background-color: #000000;
}
до змісту ↑

Імена класів

  1. Імена класів записуйте латинницею та малими літерами.
  2. Імена класів повинні бути такими, щоб за ними можна було швидко зрозуміти, якому елементу сторінки заданий клас.
  3. Уникайте скорочень, але не робіть їх надто довгими (більше трьох слів).
  4. Для написання класів використовуйте англійські слова та терміни.
  5. У назвах класів та атрибутів нема трансліту.
/* ПОГАНО */

.testElement {}
.t {}
.big_red_button {}
.knopka {}

/* ДОБРЕ */

.alert-danger {}
.tweet .user-picture {}
.button {}
.layout-center {}
до змісту ↑

Перенесення селекторів

  1. Селектори, розділені комою, записуйте з нового рядка.
/* ПОГАНО */

h1, h2, h3 {
  margin-top: 0;
}

/* ДОБРЕ */

h1,
h2,
h3 {
  margin-top: 0;
}

Пробіли між комбінаторами

  1. До і після комбінатора між селекторами ставте лише один пробіл.
/* ПОГАНО */

h3+h4{}
h1+h2 p{}
ul >li {}

/* ДОБРЕ */

h1 + h2 {}
h1 + h2 p {}
ul > li {}

Формат кольорів

  1. Кольори записуйте малими літерами у 6-значному форматі HEX.
  2. Шістнадцяткове значення кольору не скорочуйте, а записуйте повністю із усіх шести символів.
  3. Використовуйте лише малі літери.
  4. Кольори вказуйте як rgba або hsla, якщо потрібна прозорість.
/* ПОГАНО */

.block {
  background-color: #F00;
  border-left-color: rgb(0, 255, 0);
  color: black;
}

/* ДОБРЕ */

.block {
  background-color: #ff0000;
  border-left-color: #00ff00;
  color: rgba(0, 0, 0, 0.5);
}
до змісту ↑

Лапки

  1. У всіх випадках у стилях використовуйте подвійні лапки.
/* ПОГАНО */

.field[type=text] {
  background-image: url(images/cat.jpg);
}

/* ДОБРЕ */

.field[type="text"] {
  background-image: url("images/cat.jpg");
}

Ведучий нуль і пробіли після ком

  1. Нуль на початку для значень не скорочуйте.
  2. Після ком в переліках ставте один пробіл.
/* ПОГАНО */

.block {
  opacity: .5;
  background-color: rgba(0, 0, 0, .5);
}

.element {
  color: rgba(0 ,0 ,0 ,0.5);
}

/* ДОБРЕ */

.block {
  opacity: 0.5;
  background-color: rgba(0, 0, 0, 0.5);
}

Властивості що повторюються

  1. Властивості не повинні повторюватись у межах однієї декларації.
  2. Властивість може повторюватися, якщо описане "скидання" або загальний випадок.
/* ПОГАНО */

.block {
  margin-left: 10px;
  border-left: 10px solid #000000;
  margin-left: 20px;
  border-left: 10px solid #ff0000;
}

/* ДОБРЕ */

.block {
  margin: 0;
  margin-left: 20px;
  border: 10px solid #000000;
  border-bottom-color: #ff0000;
}

Одиниці вимірювання

  1. Не вказуйте одиниці виміру там, де це не потрібно.
  2. У "кастомних" властивостях слід вказувати одиницю виміру.
/* ПОГАНО */

:root {
  --size: 0;
}

.element {
  border: 0px;
  box-shadow: 0px 1px 2px #cccccc, inset 0px 1px 0 #ffffff;
  margin-top: 0px;
  width: calc(100% - var(--size));
}

/* ДОБРЕ */

:root {
  --size: 0px;
}

.element {
  border: 0;
  box-shadow: 0 1px 2px #cccccc, inset 0 1px 0 #ffffff;
  margin-top: 0;
  width: calc(100% - var(--size));
}

Дробові значення

  1. У дробових значеннях вказуйте не більше 2-х знаків після крапки.
/* ПОГАНО */

.block {
  width: 2.33333%;
}

/* ДОБРЕ */

.block {
  width: 2.33%;
}

!important

  1. Старайтесь не використовувати ключове слово !important для боротьби зі специфічністю.
  2. !important може використовуватися лише в універсальних класах-хелперах.
/* ПОГАНО */

.element {
  font-size: 17px !important;
}

/* ДОБРЕ */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  border: 0 !important;
  padding: 0 !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
}

.btn--green {
  background: green !important;
}
до змісту ↑

Доступне приховування

  1. Приховуйте контент утилітарним класом visually-hidden, щоб він був доступний для скрінрідерів та пошуковиків.
/* ПОГАНО */

h1 {
  font-size: 0;
}

.title {
  display: none;
}

/* ДОБРЕ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

<h2 class="visually-hidden">Заголовок</h2>

Порядок властивостей

Оголошення логічно пов'язаних властивостей групуйте у такому порядку:

  1. Позиціювання
  2. Блокова модель
  3. Типографіка
  4. Оформлення
  5. Анімація
  6. Різне.

Позиціонування слідує першим, тому що воно впливає на положення блоків у потоці документу. Блокова модель йде наступною, оскільки вона визначає розміри та розташування блоків.

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

Згруповані оголошення у правилі відокремлені один від одного порожнім рядком.

Порядок оголошення докладних правил, таких як font-size, font-family, line-height, відповідає порядку скороченої версії правила. У разі спільного використання докладних і скорочених правил першою йде скорочена версія.

Властивість без префіксу пишеться останнім.

Загальна логіка сортування: "від загального — до локального та менш важливого".
.block {
  /* Позиціювання */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Блокова модель */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;

  /* Типографіка */
  font-family: "Arial", sans-serif;
  font-style: normal;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  text-align: center;
  color: #333333;

  /* Оформлення */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 100px 20px #000;
  box-shadow: 0 0 100px 20px #000;
  opacity: 1;

  /* Анімація */
  transition: color 1s;

  /* Різне */
  will-change: auto;
}
Ще статті за категорією:
Михайло Петров
Михайло Петров

Мене звати Михайло. Я — WordPress-розробник. Створюю візитки, корпоративні сайти, інтернет-магазини, блоги на WordPress. Надаю консультації з WordPress.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *