Native CSS-Verschachtelung kann Ihren CSS-Code vereinfachen und Ihr gesamtes Codierungserlebnis verbessern.
Historisch gesehen war es eine schwierige Sprache, mit CSS zu arbeiten. CSS-Präprozessoren erleichterten die Arbeit mit CSS und stellten außerdem zusätzliche Funktionen wie Schleifen, Mixins und mehr bereit. Im Laufe der Jahre ist CSS leistungsfähiger geworden und hat einige der Funktionen übernommen, die ursprünglich von CSS-Präprozessoren eingeführt wurden. Eine dieser Funktionen ist das „verschachtelte Styling“.
Mit dem verschachtelten Stil können Entwickler CSS-Regeln ineinander verschachteln und so die HTML-Struktur widerspiegeln. Dies führt zu einem besser organisierten und lesbareren Code, da die Beziehung zwischen HTML-Elementen und ihren entsprechenden Stilen visuell erkennbar ist.
Verschachteltes Styling: Der alte Weg
Nested Styling ist eine Funktion, die in vielen Fällen verfügbar ist CSS-Präprozessoren wie Sass, Stylus und weniger CSS. Obwohl sich die Syntax zwischen diesen Präprozessoren unterscheiden kann, bleibt das zugrunde liegende Konzept konsistent. Wenn Sie alles stylen möchten
h1 Elemente in a div mit dem Klassennamen von Container, in normalem CSS würden Sie schreiben:.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}
In einem CSS-Präprozessor wie Less CSS implementieren Sie verschachtelte Stile wie folgt:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Der obige Codeblock erzielt die gleichen Ergebnisse wie die reguläre CSS-Implementierung, macht es aber für jeden Entwickler, der den Code liest, leicht zu verstehen, was vor sich geht. Dieses Gefühl der „Hierarchie“ war eines der größten Verkaufsargumente von CSS-Präprozessoren.
Der Verschachtelungsbaum kann ohne Einschränkungen beliebig tief verschachtelt werden, es ist jedoch unbedingt Vorsicht geboten, da eine zu tiefe Verschachtelung zu einer Ausführlichkeit des Codes führen kann.
Natives verschachteltes Styling in CSS
Nicht alle Browser bieten Unterstützung für natives verschachteltes Styling. Der Kann ich benutzen... Auf dieser Website können Sie überprüfen, ob Ihr Zielbrowser diese Funktion unterstützt.
Natives verschachteltes Styling in CSS funktioniert ähnlich wie CSS-Präprozessoren, was bedeutet, dass es möglich ist, jeden Selektor in einem anderen zu verschachteln. Es gibt jedoch einen wesentlichen Unterschied, den Sie beachten sollten. Schauen Sie sich den folgenden Codeblock an:
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>
Im Codeblock oben das div mit dem Klassennamen Container hat eine rote Hintergrundfarbe. Das Styling für die h1 Element liegt in der .Container Block. Das h1 Element hat die Farbe Gelb. Wenn Sie diesen Code im Browser ausführen, stellen Sie möglicherweise fest, dass etwas nicht stimmt. Der Browser wendet korrekterweise eine rote Hintergrundfarbe an Container div, aber die h1 hat nicht das passende Styling.
Dies liegt daran, dass verschachtelte Stile in CSS etwas anders funktionieren als in CSS-Präprozessoren wie Less. Sie können in einem verschachtelten Baum nicht direkt auf ein HTML-Element verweisen. Um dies zu beheben, müssen Sie ein kaufmännisches Und (&), wie unten dargestellt:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
Im Codeblock oben: & fungiert als Referenz auf den übergeordneten Selektor. Setzen Sie das kaufmännische Und vor das h1 Das Element sollte dem Browser mitteilen, dass Sie auf das gesamte untergeordnete Element abzielen h1 Elemente auf der Container div. Wenn Sie den Code im Browser ausführen, sollten Sie Folgendes sehen:
Seit & ist das Symbol, mit dem auf ein übergeordnetes Element verwiesen wird. Es ist durchaus möglich, die Pseudoklassen und Pseudoelemente eines Elements wie folgt anzusprechen:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Hereisapseudoelement.";
}
}
Wenn Sie vor der Implementierung des verschachtelten CSS-Stils Stile abhängig von der Browserbreite bedingt anwenden wollten, mussten Sie auf eine Methode wie die folgende zurückgreifen:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Wenn der Browser die Seite rendert, bestimmt er die Farbe der Seite P Element basierend auf der Browserbreite. Wenn die Browserbreite 750 Pixel überschreitet, wird die Farbe Grau verwendet. Andernfalls wird die Standardfarbe (Schwarz) angewendet.
Diese Implementierung funktioniert gut, aber wie Sie sich vorstellen können, können die Dinge schnell ziemlich ausführlich werden, insbesondere wenn Sie verschiedene Stile basierend auf bestimmten Regeln anwenden müssen. Es ist nun möglich zu schachteln Medien-Anfragen direkt im Stilblock eines Elements.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
Dieser Codeblock macht im Grunde das Gleiche wie der vorherige, hat aber den Vorteil, dass er leicht verständlich ist. Durch einen bloßen Blick auf die Medienabfrage und das verschachtelte übergeordnete Element können Sie erkennen, wie der Browser die entsprechenden Stile anwendet, wenn die definierten Bedingungen erfüllt sind.
Gestalten einer Website mit CSS-verschachtelten Stilen
Es ist Zeit, alles, was Sie bisher gelernt haben, in die Praxis umzusetzen Erstellen einer einfachen Website und Nutzung der verschachtelten Styling-Funktion in CSS. Erstellen Sie einen Ordner und benennen Sie ihn nach Ihren Wünschen. Erstellen Sie in diesem Ordner eine index.htm und ein style.css Datei.
Im index.htm Fügen Sie in der Datei den folgenden Boilerplate-Code hinzu:
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>
Der obige Codeblock definiert das Markup für eine simulierte Nachrichten-Website. Als nächstes öffnen Sie die style.css Datei und fügen Sie den folgenden Code hinzu:
.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;
}
}
Der obige Codeblock gestaltet die Website vollständig mit CSS-verschachteltem Stil. Der .Container Der Selektor fungiert als Wurzeltiefe. Sie können auf diesen Selektor verweisen, indem Sie die verwenden & Symbol. Wenn Sie den Code im Browser ausführen, sollten Sie Folgendes sehen:
Benötigen Sie noch einen CSS-Präprozessor?
Mit der Einführung verschachtelter Stile in natives CSS scheinen CSS-Präprozessoren unnötig zu sein. Es ist jedoch wichtig zu bedenken, dass CSS-Präprozessoren mehr bieten als nur verschachteltes Styling. Sie bieten Funktionen wie Schleifen, Mixins, Funktionen und mehr. Ob Sie einen CSS-Präprozessor verwenden oder nicht, hängt letztendlich von Ihrem spezifischen Anwendungsfall und Ihren persönlichen Vorlieben ab.