Історично CSS був важкою мовою для роботи. Препроцесори CSS полегшили роботу з CSS, а також надали додаткові функції, такі як цикли, міксини тощо. З роками CSS набув більших можливостей і прийняв деякі функції, спочатку представлені препроцесорами CSS. Однією з таких функцій є «вкладена стилізація».
MUO ВІДЕО ДНЯ
ПРОКРУТЬТЕ, ЩОБ ПРОДОВЖИТИ ВМІСТ
Вкладений стиль дозволяє розробникам вкладати правила CSS одне в одне, відображаючи структуру HTML. Це призводить до більш упорядкованого та читабельного коду, оскільки зв’язок між елементами HTML та їхніми відповідними стилями візуально очевидний.
Вкладений стиль: старий спосіб
Вкладений стиль — це функція, доступна в багатьох препроцесорах CSS, таких як Sass, Stylus і Less CSS. Хоча синтаксис цих препроцесорів може відрізнятися, основна концепція залишається незмінною. Якби ви хотіли стилізувати всі елементи h1 у div з назвою класу контейнера, у звичайному CSS, ви б написали:
.container {
background-color: #f2f2f2;
}.container h1 {
font-size: 44px;
}
У препроцесорі CSS, такому як Less CSS, ви реалізуєте такий вкладений стиль:
.container{
background-color: #f2f2f2; h1 {
font-size:44px;
}
}
Наведений вище блок коду досягає тих самих результатів, що й звичайна реалізація CSS, але дозволяє будь-якому розробнику, який читає код, легко зрозуміти, що відбувається. Це почуття «ієрархії» було одним із найбільших переваг препроцесорів CSS.
Дерево вкладеності може бути вкладено будь-якої глибини без обмежень, але важливо бути обережним, оскільки надмірно глибоке вкладення може призвести до багатослівності коду.
Нативний вкладений стиль у CSS
Не всі браузери підтримують власний вкладений стиль. The Чи можу я використати… веб-сайт може допомогти вам перевірити, чи ваш цільовий браузер підтримує цю функцію.
Вбудований вкладений стиль у CSS працює подібно до препроцесорів CSS, тобто можна вставляти будь-який селектор в інший. Але є одна ключова відмінність, на яку варто звернути увагу. Подивіться на блок коду нижче:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nested Styling in CSS</title>
</head>
<body>
<div class="container">
<h1>Hello from the children of planet Earth!</h1>
</div>
<style>
.container {
background-color: red;h1 {
color: yellow;
}
}
</style>
</body>
</html>
У наведеному вище блоці коду div з контейнером імені класу має червоний колір тла. Стиль для елемента h1 міститься в блоці .container. Цей елемент h1 має жовтий колір. Коли ви запускаєте цей код у браузері, ви можете помітити щось не так. Браузер правильно застосовує червоний колір тла до контейнера div, але h1 не має відповідного стилю.
Це тому, що вкладені стилі працюють дещо по-іншому в CSS порівняно з препроцесорами CSS, такими як Less. Ви не можете безпосередньо посилатися на елемент HTML у вкладеному дереві. Щоб виправити це, потрібно використовувати амперсанд (&), як показано нижче:
.container {
background-color: red; & h1 {
color: yellow;
}
}
У наведеному вище блоці коду & діє як посилання на батьківський селектор. Розміщення амперсанда перед елементом h1 має дати браузеру знати, що ви націлені на всі дочірні елементи h1 у контейнері div. Коли ви запускаєте код у браузері, ви повинні побачити наступне:
Оскільки & є символом, який використовується для посилання на батьківський елемент, цілком можливо націлити псевдокласи та псевдоелементи елемента таким чином:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Here is a pseudo element.";
}
}
До впровадження вкладених стилів CSS, якщо ви мали на меті застосувати стилі умовно, залежно від ширини браузера, вам доводилося вдаватися до такого методу:
p {
color:black;
}@media (min-width:750px) {
p {
color:gray;
}
}
Коли браузер відображає сторінку, він визначає колір елемента p на основі ширини браузера. Якщо ширина браузера перевищує 750 пікселів, він використовує сірий колір; інакше він застосовує колір за замовчуванням (чорний).
Ця реалізація працює нормально, але, як ви можете собі уявити, все може швидко стати досить багатослівним, особливо коли вам потрібно застосувати різні стилі на основі певних правил. Тепер можна вкладати медіа-запити безпосередньо в блок стилів елемента.
p {
color:black; @media (min-width:750px) {
color:gray;
}
}
Цей блок коду виконує в основному те саме, що й попередній, але його перевага полягає в тому, що його легко зрозуміти. Просто дивлячись на медіа-запит і вкладений батьківський елемент, ви можете визначити, як браузер застосовуватиме відповідні стилі, коли визначені умови виконуються.
Стилізуйте веб-сайт за допомогою вкладених стилів CSS
Настав час застосувати на практиці все, про що ви дізналися, створивши простий веб-сайт і використовуючи функцію вкладеного стилю в CSS. Створіть папку та назвіть її як завгодно. У цій папці створіть файли index.htm і style.css.
У файлі index.htm додайте такий шаблонний код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://wilku.top/how-to-use-native-css-nesting-in-your-web-applications/style.css" />
<title>Simple Website</title>
</head>
<body>
<div class="container">
<div class="article">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
<div class="meta-data">
<span class="author">David Uzondu</span>
<span class="time">3 hours ago</span>
</div>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ut
quasi hic sint dolorum sapiente magni ratione? Suscipit commodi ad,
asperiores nostrum natus aperiam et alias, officiis dolorum ipsa vero
minima consequatur recusandae quasi aliquid quibusdam ducimus eaque!
Excepturi voluptas eveniet nemo, earum doloribus, soluta architecto
iste repellat autem aspernatur beatae ut quis odio est voluptates sunt
qui rerum blanditiis minus! Rerum labore nobis, odit quod amet dolorum
quae laudantium.
</div>
</div>
<div class="sidebar">
<h2>Trending Articles</h2>
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, iusto ipsum!</h4>
</div>
</div>
</body>
</html>
Наведений вище блок коду визначає розмітку для фіктивного сайту новин. Далі відкрийте файл style.css і додайте такий код:
.container {
display: flex;
gap: 25px; @media(max-width:750px) {
flex-direction: column;
}
.article{
width:90%;
}
& div:nth-child(3) {
text-align: justify;
}
& span {
color: rgb(67, 66, 66);
&:nth-child(1)::before {
font-style: italic;
content: "Written by ";
}
&:nth-child(2) {
font-style: italic;
&::before {
content: " ~ ";
}
}
}
.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
}
}
Блок коду вище стилізує веб-сайт повністю за допомогою вкладених стилів CSS. Селектор .container діє як коренева глибина. Ви можете зробити посилання на цей селектор за допомогою символу &. Коли ви запускаєте код у браузері, ви повинні побачити наступне:
Вам все ще потрібен препроцесор CSS?
З появою вкладених стилів у нативний CSS препроцесори CSS можуть здатися непотрібними. Однак дуже важливо мати на увазі, що препроцесори CSS пропонують більше, ніж просто вкладене оформлення. Вони надають такі функції, як цикли, міксини, функції тощо. Зрештою, використання препроцесора CSS чи ні залежить від конкретного випадку використання та особистих уподобань.