Natywne zagnieżdżanie CSS może uprościć kod CSS i poprawić ogólne wrażenia z kodowania.
W przeszłości CSS był trudnym językiem do pracy. Preprocesory CSS ułatwiły pracę z CSS, a także zapewniły dodatkowe funkcje, takie jak pętle, mixiny i inne. Z biegiem lat CSS stał się bardziej wydajny i przyjął niektóre funkcje pierwotnie wprowadzone przez preprocesory CSS. Jedną z takich funkcji jest „stylizacja zagnieżdżona”.
Stylizacja zagnieżdżona umożliwia programistom zagnieżdżanie reguł CSS w sobie, odzwierciedlając strukturę HTML. Skutkuje to bardziej zorganizowanym i czytelnym kodem, ponieważ związek między elementami HTML a odpowiadającymi im stylami jest widoczny wizualnie.
Stylizacja zagnieżdżona: po staremu
Stylizacja zagnieżdżona to funkcja dostępna w wielu Preprocesory CSS, takie jak Sass, Rysik i Mniej CSS. Chociaż składnia może się różnić między tymi preprocesorami, podstawowa koncepcja pozostaje spójna. Jeśli chcesz stylizować wszystkie h1 elementy w A dz z nazwą klasy pojemnik, w zwykłym CSS napisałbyś:
.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}
W preprocesorze CSS, takim jak Less CSS, implementujesz zagnieżdżoną stylizację w następujący sposób:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Powyższy blok kodu daje takie same wyniki, jak zwykła implementacja CSS, ale ułatwia każdemu programiście odczytanie kodu, aby zrozumieć, co się dzieje. To poczucie „hierarchii” było jednym z największych atutów preprocesorów CSS.
Drzewo zagnieżdżenia można zagnieżdżać na dowolnej głębokości bez ograniczeń, ale należy zachować ostrożność, ponieważ zbyt głębokie zagnieżdżanie może prowadzić do gadatliwości kodu.
Natywne stylowanie zagnieżdżone w CSS
Nie wszystkie przeglądarki obsługują natywne style zagnieżdżone. The Mogę uzyć... może pomóc Ci sprawdzić, czy Twoja docelowa przeglądarka obsługuje tę funkcję.
Natywne style zagnieżdżone w CSS działają podobnie do preprocesorów CSS, co oznacza, że możliwe jest zagnieżdżenie dowolnego selektora w innym. Ale jest jedna kluczowa różnica, na którą powinieneś zwrócić uwagę. Spójrz na poniższy blok kodu:
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>
W powyższym bloku kodu element div z nazwą klasy pojemnik ma czerwony kolor tła. Stylizacja dla h1 pierwiastek leży w .pojemnik blok. Ten h1 element ma kolor żółty. Po uruchomieniu tego kodu w przeglądarce możesz zauważyć, że coś jest nie tak. Przeglądarka poprawnie stosuje czerwony kolor tła do pojemnik div, ale h1 nie ma odpowiedniej stylizacji.
Dzieje się tak dlatego, że stylizacja zagnieżdżona działa nieco inaczej w CSS w porównaniu z preprocesorami CSS, takimi jak Less. Nie można bezpośrednio odwoływać się do elementu HTML w zagnieżdżonym drzewie. Aby to naprawić, musisz użyć ampersand (&) jak pokazano poniżej:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
W powyższym bloku kodu & działa jako odniesienie do selektora nadrzędnego. Umieszczenie znaku ampersand przed h1 element powinien poinformować przeglądarkę, że kierujesz reklamy do wszystkich dzieci h1 elementy na pojemnik dz. Po uruchomieniu kodu w przeglądarce powinieneś zobaczyć:
Od & jest symbolem używanym do odwoływania się do elementu nadrzędnego, całkiem możliwe jest kierowanie na pseudoklasy elementu i pseudoelementy w następujący sposób:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Hereisapseudoelement.";
}
}
Przed wdrożeniem stylów zagnieżdżonych CSS, jeśli zamierzałeś zastosować style warunkowo, w zależności od szerokości przeglądarki, musiałeś skorzystać z następującej metody:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Gdy przeglądarka renderuje stronę, określa kolor strony P element na podstawie szerokości przeglądarki. Jeśli szerokość przeglądarki przekracza 750px, używa koloru szarego; w przeciwnym razie stosuje domyślny kolor (czarny).
Ta implementacja działa dobrze, ale jak możesz sobie wyobrazić, rzeczy mogą szybko stać się dość gadatliwe, zwłaszcza gdy musisz zastosować różne style w oparciu o określone zasady. Teraz można gniazdować zapytania medialne bezpośrednio w bloku stylu elementu.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
Ten blok kodu robi zasadniczo to samo, co poprzedni, ale ma tę zaletę, że jest łatwy do zrozumienia. Wystarczy spojrzeć na zapytanie o media i zagnieżdżony element nadrzędny, aby stwierdzić, w jaki sposób przeglądarka zastosuje odpowiednie style, gdy zostaną spełnione określone warunki.
Stylizacja witryny za pomocą zagnieżdżonych stylów CSS
Nadszedł czas, aby zastosować w praktyce wszystko, czego nauczyłeś się do tej pory budowa prostej strony internetowej i wykorzystanie zagnieżdżonej funkcji stylizacji w CSS. Utwórz folder i nazwij go, jak chcesz. W tym folderze utwórz plik indeks.htm i styl.css plik.
w indeks.htm dodaj następujący kod wzorcowy:
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>
Powyższy blok kodu definiuje znaczniki dla fałszywej witryny z wiadomościami. Następnie otwórz styl.css plik i dodaj następujący kod:
.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;
}
}
Powyższy blok kodu stylizuje witrynę całkowicie za pomocą stylów zagnieżdżonych w CSS. The .pojemnik selektor działa jako głębokość korzenia. Możesz odwołać się do tego selektora za pomocą & symbol. Po uruchomieniu kodu w przeglądarce powinieneś zobaczyć:
Czy nadal potrzebujesz preprocesora CSS?
Wraz z wprowadzeniem zagnieżdżonych stylów do natywnego CSS, preprocesory CSS mogą wydawać się niepotrzebne. Należy jednak pamiętać, że preprocesory CSS oferują coś więcej niż tylko zagnieżdżoną stylizację. Zapewniają funkcje takie jak pętle, mixiny, funkcje i wiele innych. Ostatecznie to, czy użyć preprocesora CSS, czy nie, zależy od konkretnego przypadku użycia i osobistych preferencji.
