Historicky byl jazyk CSS obtížný pro práci. CSS preprocesory usnadnily práci s CSS a také poskytly další funkce, jako jsou smyčky, mixiny a další. V průběhu let se CSS stalo schopnějším a přijalo některé z funkcí původně zavedených preprocesory CSS. Jednou z takových funkcí je „vnořený styl“.
MUO VIDEO DNE
POKRAČOVÁNÍ V OBSAHU POKRAČUJTE PŘEJÍMÁNÍM
Vnořený styl umožňuje vývojářům vnořovat pravidla CSS do sebe, což odráží strukturu HTML. Výsledkem je lépe organizovaný a čitelnější kód, protože vztah mezi prvky HTML a jejich odpovídajícími styly je vizuálně zřejmý.
Table of Contents
Nested Styling: The Old Way
Nested Styling je funkce dostupná v mnoha preprocesorech CSS, jako jsou Sass, Stylus a Less CSS. Ačkoli se syntaxe mezi těmito preprocesory může lišit, základní koncept zůstává konzistentní. Pokud byste chtěli stylovat všechny prvky h1 v div s názvem třídy kontejneru, v běžném CSS byste napsali:
.container {
background-color: #f2f2f2;
}.container h1 {
font-size: 44px;
}
V preprocesoru CSS, jako je Less CSS, implementujete vnořený styl takto:
.container{
background-color: #f2f2f2; h1 {
font-size:44px;
}
}
Blok kódu výše dosahuje stejných výsledků jako běžná implementace CSS, ale usnadňuje každému vývojáři, který čte kód, pochopit, co se děje. Tento smysl pro „hierarchii“ byl jedním z největších prodejních míst preprocesorů CSS.
Vnořovací strom může být vnořen do libovolné hloubky bez omezení, ale je nezbytné být obezřetný, protože příliš hluboké vnoření může vést k upovídanosti kódu.
Nativní vnořený styl v CSS
Ne všechny prohlížeče podporují nativní vnořený styl. The Mohu použít… webové stránky vám mohou pomoci zkontrolovat, zda váš cílový prohlížeč tuto funkci podporuje.
Nativní vnořený styl v CSS funguje podobně jako preprocesory CSS, to znamená, že je možné vnořit libovolný selektor do jiného. Ale je tu jeden zásadní rozdíl, kterého byste si měli všimnout. Podívejte se na blok kódu níže:
<!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>
Ve výše uvedeném bloku kódu má div s kontejnerem názvu třídy červenou barvu pozadí. Styl pro prvek h1 leží v bloku .container. Tento prvek h1 má žlutou barvu. Když tento kód spustíte v prohlížeči, můžete si všimnout, že je něco špatně. Prohlížeč správně aplikuje červenou barvu pozadí na kontejner div, ale h1 nemá odpovídající styl.
Je to proto, že vnořené styly fungují v CSS trochu jinak než preprocesory CSS, jako je Less. Nemůžete přímo odkazovat na prvek HTML ve vnořeném stromu. Chcete-li to vyřešit, musíte použít ampersand (&), jak je znázorněno níže:
.container {
background-color: red; & h1 {
color: yellow;
}
}
Ve výše uvedeném bloku kódu funguje & jako odkaz na nadřazený selektor. Umístěním znaku ampersand před prvek h1 by měl prohlížeč vědět, že cílíte na všechny podřízené prvky h1 v kontejneru div. Když spustíte kód v prohlížeči, měli byste vidět následující:
Protože & je symbol používaný k odkazování na nadřazený prvek, je docela možné zacílit na pseudotřídy a pseudoprvky prvku takto:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Here is a pseudo element.";
}
}
Pokud jste před implementací vnořených stylů CSS chtěli použít styly podmíněně v závislosti na šířce prohlížeče, museli jste se uchýlit k metodě, jako je tato:
p {
color:black;
}@media (min-width:750px) {
p {
color:gray;
}
}
Když prohlížeč vykreslí stránku, určí barvu prvku p na základě šířky prohlížeče. Pokud šířka prohlížeče přesáhne 750 pixelů, použije šedou barvu; jinak použije výchozí barvu (černou).
Tato implementace funguje dobře, ale jak si dokážete představit, věci se mohou rychle stát velmi podrobnými, zvláště když potřebujete použít různé styly založené na určitých pravidlech. Nyní je možné vnořovat mediální dotazy přímo do bloku stylu prvku.
p {
color:black; @media (min-width:750px) {
color:gray;
}
}
Tento blok kódu dělá v podstatě to samé jako předchozí, ale má tu výhodu, že je snadno srozumitelný. Pouhým pohledem na dotaz na média a vnořený nadřazený prvek můžete zjistit, jak prohlížeč použije příslušné styly, když jsou splněny definované podmínky.
Stylování webu pomocí vnořených stylů CSS
Je čas uvést vše, co jste se dosud naučili, do praxe vytvořením jednoduchého webu a využitím funkce vnořených stylů v CSS. Vytvořte složku a pojmenujte ji, jak chcete. V této složce vytvořte soubor index.htm a style.css.
Do souboru index.htm přidejte následující standardní kód:
<!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>
Blok kódu výše definuje označení pro falešný zpravodajský web. Dále otevřete soubor style.css a přidejte následující kód:
.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;
}
}
Blok kódu výše stylizuje web zcela pomocí vnořených stylů CSS. Volič .container funguje jako hloubka kořene. Na tento volič můžete odkazovat pomocí symbolu &. Když spustíte kód v prohlížeči, měli byste vidět následující:
Stále potřebujete CSS preprocesor?
Se zavedením vnořených stylů do nativních CSS se mohou předprocesory CSS zdát zbytečné. Je však zásadní mít na paměti, že preprocesory CSS nabízejí více než jen vnořený styl. Poskytují funkce jako smyčky, mixiny, funkce a další. V konečném důsledku to, zda použít preprocesor CSS nebo ne, závisí na vašem konkrétním případu použití a osobních preferencích.