Нативното CSS влагане може да опрости вашия CSS код и да подобри цялостното ви изживяване при кодиране.

В исторически план CSS е труден език за работа. CSS препроцесорите улесниха работата с CSS и също така предоставиха допълнителни функции като цикли, миксини и др. През годините CSS стана по-способен и възприе някои от функциите, въведени първоначално от CSS препроцесорите. Една такава функция е "вложен стил".

Вложеният стил позволява на разработчиците да влагат CSS правила едно в друго, отразявайки структурата на HTML. Това води до по-организиран и четим код, тъй като връзката между HTML елементите и съответните им стилове е визуално очевидна.

Вложен стил: Старият начин

Вложеното оформяне е функция, налична в много CSS препроцесори като Sass, стилус и по-малко CSS. Въпреки че синтаксисът може да се различава между тези препроцесори, основната концепция остава последователна. Ако искате да стилизирате всички h1 елементи в a див с името на класа на контейнер, в обикновен CSS, бихте написали:

instagram viewer 
.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}

В CSS препроцесор като Less CSS вие прилагате вложен стил по следния начин:

.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
 }
}

Кодовият блок по-горе постига същите резултати като обикновената реализация на CSS, но улеснява всеки разработчик, който чете кода, да разбере какво се случва. Това усещане за "йерархия" беше една от най-големите точки за продажба на CSS препроцесорите.

Дървото за влагане може да бъде вложено на произволна дълбочина без ограничения, но е важно да бъдете внимателни, тъй като прекалено дълбокото влагане може да доведе до многословност на кода.

Естествен вложен стил в CSS

Не всички браузъри включват поддръжка за естествен вложен стил. The Мога ли да използвам... уебсайт може да ви помогне да проверите дали целевият ви браузър поддържа тази функция.

Естественият вложен стил в CSS работи подобно на CSS препроцесорите, което означава, че е възможно да вложите всеки селектор в друг. Но има една ключова разлика, която трябва да отбележите. Разгледайте кодовия блок по-долу:

html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Nested Styling in CSStitle>
head>
<body>
<divclass="container">
<h1>Hello from the children of planet Earth!h1>
div>
<style>
 .container {
 background-color: red;
 h1 {
 color: yellow;
 }
 }
style>
body>
html>

В кодовия блок по-горе, div с името на класа контейнер има червен фонов цвят. Стайлингът за h1 елемент се намира в .контейнер блок. Това h1 елементът има жълт цвят. Когато стартирате този код в браузъра, може да забележите нещо нередно. Браузърът правилно прилага червен фонов цвят към контейнер div, но the h1 няма подходящ стил.

Това е така, защото вложените стилове работят малко по-различно в CSS в сравнение с CSS препроцесорите като Less. Не можете директно да препращате към HTML елемент във вложено дърво. За да коригирате това, трябва да използвате амперсанд (&), както е илюстрирано по-долу:

.container {
background-color: red;
 & h1 {
color: yellow;
 }
}

В кодовия блок по-горе, & действа като препратка към родителския селектор. Поставяне на амперсанда пред h1 елементът трябва да уведоми браузъра, че насочвате към всички деца h1 елементи на контейнер див. Когато стартирате кода в браузъра, трябва да видите следното:

От & е символът, използван за препратка към родителски елемент, е напълно възможно да се насочат към псевдо-класовете и псевдо-елементите на елемент като този:

.parent1{
 &:hover{
background-color: red;
 }
 &::before{
content:"Hereisapseudoelement.";
 }
}

Преди внедряването на CSS вложен стил, ако сте имали за цел да прилагате стилове условно, в зависимост от ширината на браузъра, трябваше да прибегнете до метод като следния:

p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
 }
}

Когато браузърът визуализира страницата, той определя цвета на стр елемент въз основа на ширината на браузъра. Ако ширината на браузъра надвишава 750px, той използва сив цвят; в противен случай прилага цвета по подразбиране (черен).

Това внедряване работи добре, но както можете да си представите, нещата могат да станат доста многословни бързо, особено когато трябва да приложите различни стилове въз основа на определени правила. Вече е възможно да гнездите медийни заявки директно в стиловия блок на даден елемент.

p {
color:black;
@media (min-width:750px) {
color:gray;
 }
}

Този кодов блок прави основно същото като предишния, но идва с предимството, че е лесен за разбиране. Като просто разгледате медийната заявка и вложения родителски елемент, можете да разберете как браузърът ще приложи подходящите стилове, когато определените условия са изпълнени.

Оформяне на уеб сайт с CSS вложени стилове

Време е да приложите на практика всичко, което сте научили досега създаване на прост уебсайт и използване на функцията за вложен стил в CSS. Създайте папка и я наименувайте както искате. В тази папка създайте index.htm и а style.css файл.

В index.htm файл, добавете следния шаблонен код:

html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="style.css" />
<title>Simple Websitetitle>
head>
<body>
<divclass="container">
<divclass="article">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.h1>
<divclass="meta-data">
<spanclass="author">David Uzonduspan>
<spanclass="time">3 hours agospan>
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>
<divclass="sidebar">
<h2>Trending Articlesh2>
<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: "Writtenby ";
 }


 &:nth-child(2) {
font-style: italic;
 &::before {
content: " ~ ";
 }
 }
 }


.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
 }
}

Кодовият блок по-горе стилизира уебсайта изцяло с CSS вложен стил. The .контейнер селекторът действа като коренна дълбочина. Можете да направите препратка към този селектор, като използвате & символ. Когато стартирате кода в браузъра, трябва да видите следното:

Все още ли имате нужда от CSS препроцесор?

С въвеждането на вложени стилове в родния CSS, CSS препроцесорите може да изглеждат ненужни. Въпреки това е изключително важно да имате предвид, че CSS препроцесорите предлагат повече от просто вложен стил. Те предоставят функции като цикли, миксини, функции и др. В крайна сметка, дали да използвате CSS препроцесор или не зависи от вашия конкретен случай на употреба и лични предпочитания.