تودرتوی CSS بومی می تواند کد CSS شما را ساده کرده و تجربه کلی کدنویسی شما را افزایش دهد.
از لحاظ تاریخی، CSS زبان سختی برای کار با آن بوده است. پیش پردازنده‌های CSS کار با CSS را آسان‌تر کرده و همچنین ویژگی‌های اضافی مانند حلقه‌ها، میکس‌ها و موارد دیگر را ارائه می‌کنند. در طول سال‌ها، CSS توانایی بیشتری پیدا کرده و برخی از ویژگی‌هایی را که در ابتدا توسط پیش‌پردازنده‌های CSS معرفی شده بود، به کار گرفته است. یکی از این ویژگی ها “استایل تو در تو” است.
استایل تودرتو به توسعه دهندگان این امکان را می دهد که قوانین CSS را درون یکدیگر قرار دهند و ساختار HTML را منعکس کنند. این منجر به کدهای سازماندهی شده و خواناتر می شود، زیرا ارتباط بین عناصر HTML و سبک های مربوط به آنها از نظر بصری آشکار است.
استایل تو در تو: روش قدیمی
Nested Styling یک ویژگی در بسیاری از پیش پردازنده های CSS مانند Sass، Stylus و Less CSS است. اگرچه نحو ممکن است در میان این پیش پردازشگرها متفاوت باشد، مفهوم زیربنایی ثابت باقی می ماند. اگر می‌خواهید تمام عناصر h1 را در یک div با نام کلاس Container در CSS معمولی استایل دهید، می‌نویسید:
.container {
background-color: #f2f2f2;
}
.container h1 {
font-size: 44px;
}
در یک پیش پردازنده CSS مانند Less CSS، شما یک استایل تو در تو را به این صورت پیاده سازی می کنید:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
بلوک کد بالا همان نتایجی را به دست می‌آورد که پیاده‌سازی معمولی CSS را به دست می‌آورد، اما درک آنچه را که در جریان است برای هر توسعه‌دهنده‌ای که کد را می‌خواند آسان می‌کند. این حس “سلسله مراتب” یکی از بزرگترین نقاط فروش پیش پردازنده های CSS بود.
درخت تودرتو را می توان بدون محدودیت در هر عمقی لانه کرد، اما باید محتاط بود، زیرا لانه سازی بیش از حد عمیق ممکن است منجر به پرحرفی کد شود.
استایل تودرتوی بومی در CSS
همه مرورگرها از استایل تودرتو بومی پشتیبانی نمی کنند. وب سایت Can I use… می تواند به شما کمک کند بررسی کنید آیا مرورگر مورد نظر شما از این ویژگی پشتیبانی می کند یا خیر.
استایل تودرتوی بومی در CSS مشابه پیش پردازنده‌های CSS عمل می‌کند، به این معنی که می‌توان هر انتخاب‌کننده‌ای را درون دیگری قرار داد. اما یک تفاوت اساسی وجود دارد که باید به آن توجه کنید. به بلوک کد زیر نگاهی بیندازید:
<!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>
در بلوک کد بالا، div با نام کلاس دارای رنگ پس‌زمینه قرمز است. طراحی عنصر h1 در بلوک .container نهفته است. این عنصر h1 دارای رنگ زرد است. وقتی این کد را در مرورگر اجرا می کنید، ممکن است متوجه مشکلی شوید. مرورگر به درستی یک رنگ پس‌زمینه قرمز را به دیوی ظرف اعمال می‌کند، اما h1 استایل مناسبی ندارد.
این به این دلیل است که استایل تو در تو در CSS در مقایسه با پیش پردازنده های CSS مانند Less کمی متفاوت عمل می کند. شما نمی توانید مستقیماً به یک عنصر HTML در یک درخت تودرتو ارجاع دهید. برای رفع این مشکل، باید از علامت علامت (&) همانطور که در زیر نشان داده شده است استفاده کنید:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
در بلوک کد بالا، & به عنوان مرجع انتخابگر والد عمل می کند. قرار دادن علامت علامت قبل از عنصر h1 باید به مرورگر بفهماند که شما تمام عناصر فرزند h1 را در بخش کانتینر هدف قرار داده اید. وقتی کد را در مرورگر اجرا می کنید، باید موارد زیر را مشاهده کنید:
از آنجایی که & نمادی است که برای ارجاع به یک عنصر والد استفاده می شود، می توان شبه کلاس ها و شبه عناصر یک عنصر را مانند زیر هدف قرار داد:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Here is a pseudo element.";
}
}
جستجوهای رسانه تودرتو
قبل از پیاده‌سازی استایل تودرتوی CSS، اگر می‌خواستید سبک‌ها را به صورت مشروط اعمال کنید، بسته به عرض مرورگر، باید به روشی مانند زیر متوسل می‌شوید:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
وقتی مرورگر صفحه را رندر می کند، رنگ عنصر p را بر اساس عرض مرورگر تعیین می کند. اگر عرض مرورگر بیش از 750 پیکسل باشد، از رنگ خاکستری استفاده می کند. در غیر این صورت، رنگ پیش فرض (سیاه) را اعمال می کند.
این پیاده سازی به خوبی کار می کند، اما همانطور که می توانید تصور کنید، همه چیز می تواند به سرعت پیچیده شود، به خصوص زمانی که شما نیاز به اعمال سبک های مختلف بر اساس قوانین خاصی دارید. اکنون می توان پرس و جوهای رسانه را مستقیماً در بلوک سبک یک عنصر قرار داد.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
این بلوک کد اساساً همان کار قبلی را انجام می دهد، اما مزیت آن این است که درک آن آسان است. تنها با نگاه کردن به درخواست رسانه و عنصر والد تودرتو، می توانید بگویید که چگونه مرورگر در صورت برآورده شدن شرایط تعریف شده، سبک های مناسب را اعمال می کند.
طراحی یک وب سایت با CSS Nested Styles
زمان آن فرا رسیده است که با ساختن یک وب سایت ساده و استفاده از ویژگی استایل تو در تو در CSS، همه چیزهایی را که تاکنون آموخته اید، در عمل پیاده کنید. یک پوشه ایجاد کنید و نام آن را هر چه می خواهید بگذارید. در آن پوشه، یک فایل index.htm و یک فایل style.css ایجاد کنید.
در فایل index.htm کد boilerplate زیر را اضافه کنید:
<!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="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>
بلوک کد بالا نشانه گذاری یک وب سایت خبری ساختگی را مشخص می کند. سپس فایل 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: "Written by ";
}
&:nth-child(2) {
font-style: italic;
&::before {
content: " ~ ";
}
}
}
.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
}
}
بلوک کد بالا وب سایت را کاملاً با استایل تو در تو CSS استایل می کند. انتخابگر کانتینر به عنوان عمق ریشه عمل می کند. می توانید با استفاده از علامت & به این انتخابگر ارجاع دهید. وقتی کد را در مرورگر اجرا می کنید، باید موارد زیر را مشاهده کنید:
آیا هنوز به یک پیش پردازنده CSS نیاز دارید؟
با معرفی سبک های تو در تو به CSS بومی، پیش پردازنده های CSS ممکن است غیر ضروری به نظر برسند. با این حال، مهم است که به خاطر داشته باشید که پیش پردازنده‌های CSS چیزی بیش از یک استایل تودرتو ارائه می‌دهند. آنها ویژگی هایی مانند حلقه ها، میکس ها، توابع و موارد دیگر را ارائه می دهند. در نهایت، اینکه آیا از یک پیش پردازنده CSS استفاده کنید یا نه، بستگی به مورد استفاده خاص و ترجیحات شخصی شما دارد.