


Блог IT-шника
Блог IT-шника
Привіт:) У цьому пості покажу як правильно стилізувати код HTML та CSS для легшого його розуміння та подальшого розширення.
Для будь-якої мови програмування існують так звані "best practices" стилізації та оформлення, у яких пропонуються основні правила форматування рядків коду. Дотримання цих рекомендацій дозволить розробнику легше орієнтуватись у своєму або чужому коді, тратити менше часу на його розуміння і швидше досягати результату.
<!-- ПОГАНО -->
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-документів наступна:
<!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>
до змісту ↑
Виняток: атрибути для 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="Троянда в полі.">
до змісту ↑
<!-- ПОГАНО -->
<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>
до змісту ↑
<!-- ПОГАНО -->
<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">
до змісту ↑
class
йде одразу після імені тегу.<!-- ПОГАНО -->
<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">
до змісту ↑
<!-- ПОГАНО -->
<input type="text" disabled="disabled" required="required">
<!-- ДОБРЕ -->
<input type="text" disabled required>
=
.<!-- ПОГАНО -->
<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">
<!-- ПОГАНО -->
<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>
до змісту ↑
iframe
повинні бути вказані розміри.<!-- ПОГАНО -->
<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>
до змісту ↑
-
та підкреслення _
. У коді дотримуйтесь одного стилю.<!-- ПОГАНО -->
<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
зазначайте тип відправлення даних.<!-- ПОГАНО -->
<form method=""></form>
<form></form>
<!-- ДОБРЕ -->
<form method="post"></form>
<form method="get"></form>
<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>
до змісту ↑
<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>
до змісту ↑
@import
працює повільніше, ніж тег <link>
. Тому використовуйте останнє.<!-- ПОГАНО -->
<style>
@import url("reset.css");
</style>
<!-- ДОБРЕ -->
<link rel="stylesheet" href="reset.css">
/* ПОГАНО */
.Element {
Color: #ff0000;
}
.ELEMENT {
COLOR: #ff0000;
}
.елемент {
COLOR: #ff0000;
}
/* ДОБРЕ */
.element {
color: #ff0000;
}
/* ПОГАНО */
.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;
}
до змісту ↑
/* ПОГАНО */
.testElement {}
.t {}
.big_red_button {}
.knopka {}
/* ДОБРЕ */
.alert-danger {}
.tweet .user-picture {}
.button {}
.layout-center {}
до змісту ↑
/* ПОГАНО */
h1, h2, h3 {
margin-top: 0;
}
/* ДОБРЕ */
h1,
h2,
h3 {
margin-top: 0;
}
/* ПОГАНО */
h3+h4{}
h1+h2 p{}
ul >li {}
/* ДОБРЕ */
h1 + h2 {}
h1 + h2 p {}
ul > li {}
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);
}
до змісту ↑
/* ПОГАНО */
.field[type=text] {
background-image: url(images/cat.jpg);
}
/* ДОБРЕ */
.field[type="text"] {
background-image: url("images/cat.jpg");
}
/* ПОГАНО */
.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);
}
/* ПОГАНО */
.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;
}
/* ПОГАНО */
: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));
}
/* ПОГАНО */
.block {
width: 2.33333%;
}
/* ДОБРЕ */
.block {
width: 2.33%;
}
!important
для боротьби зі специфічністю.!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;
}
до змісту ↑
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>
Оголошення логічно пов'язаних властивостей групуйте у такому порядку:
Позиціонування слідує першим, тому що воно впливає на положення блоків у потоці документу. Блокова модель йде наступною, оскільки вона визначає розміри та розташування блоків.
Решта властивостей, які змінюють вигляд внутрішніх частин блоків і не впливають на інші блоки, йдуть в останню чергу.
Згруповані оголошення у правилі відокремлені один від одного порожнім рядком.
Порядок оголошення докладних правил, таких як 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;
}