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 „zagnieżdżona stylizacja”.
MUO WIDEO DNIA
PRZEWIŃ, ABY KONTYNUOWAĆ TREŚĆ
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 wizualnie widoczny.
Spis treści:
Stylizacja zagnieżdżona: po staremu
Nested Styling to funkcja dostępna w wielu preprocesorach CSS, takich jak Sass, Stylus i Less CSS. Chociaż składnia może się różnić między tymi preprocesorami, podstawowa koncepcja pozostaje spójna. Jeśli chciałbyś stylizować wszystkie elementy h1 w div z nazwą klasy kontenera, w zwykłym CSS napisałbyś:
.container {
background-color: #f2f2f2;
}.container h1 {
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:
<!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>
W powyższym bloku kodu element div z kontenerem nazwy klasy ma czerwone tło. Stylizacja elementu h1 leży w bloku .container. Ten element h1 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 elementu div kontenera, ale element h1 nie ma odpowiedniego stylu.
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ć ampersandu (&), 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 elementem h1 powinno poinformować przeglądarkę, że celujesz we wszystkie elementy potomne h1 w div kontenera. Po uruchomieniu kodu w przeglądarce powinieneś zobaczyć:
Ponieważ & jest symbolem używanym do odwoływania się do elementu nadrzędnego, całkiem możliwe jest kierowanie na pseudoklasy i pseudoelementy elementu w następujący sposób:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Here is a pseudo element.";
}
}
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 elementu p 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żliwe jest zagnieżdżanie zapytań o media bezpośrednio w bloku stylów 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, budując prostą stronę internetową i wykorzystując zagnieżdżoną funkcję stylizacji w CSS. Utwórz folder i nazwij go, jak chcesz. W tym folderze utwórz plik index.htm i plik style.css.
W pliku index.htm dodaj następujący kod standardowy:
<!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>
Powyższy blok kodu definiuje znaczniki dla fałszywej witryny z wiadomościami. Następnie otwórz plik style.css 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: "Written by ";
}
&: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. Selektor .container działa jako głębokość korzenia. Możesz odwołać się do tego selektora za pomocą symbolu &. 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.