مقدمه‌ای بر نشاندن
تو دنیای طراحی وب، CSS یکی از ابزارهای بسیار قدرتمند برای استایل دادن به صفحات وبه. خیلی وقت‌ها کد CSS ما طولانی و شلوغ میشه و اگر بخوایم بیشتر روی بهینه‌سازی و ساده سازی ساختار کدها کار کنیم، تکنیک «نشاندن» یکی از مواردیه که حسابی به کارمون میاد.
نشاندن یا همون «nesting» به ما این امکان رو میده که قوانین CSS رو به صورت سلسله مراتبی بنویسیم. یعنی می‌تونیم قوانین فرزند و والد رو به صورت یکجا و در کنار هم مشخص کنیم. این کار نه تنها خوندن کد رو راحت‌تر میکنه، بلکه نگهداری و به‌روزرسانی استایل‌ها هم راحت‌تر میشه.
فرض کنید یک کامپوننت دارین که چندتا کلاس داره و هر کدوم از این کلاس‌ها خودشون مجموعه‌ای از استایل‌ها دارن. وقتی بخوایم برای این کامپوننت استایل بنویسیم، استفاده از نشاندن می‌تونه حسابی کارمون رو ساده‌تر کنه.
مزایای نشاندن در CSS
با نشاندن، کدها تمیزتر و قابل فهم‌تر میشن و می‌تونیم استایل‌ها رو مثل یک خوشه کنار هم داشته باشیم. مخصوصاً وقتی از پیش‌پردازنده‌هایی مثل Sass استفاده می‌کنیم، نشاندن می‌تونه خیلی کمک کننده باشه.
البته استفاده نادرست و بیش از حد از نشاندن می‌تونه پیچیدگی کدها رو زیاد کنه، پس باید به صورت معقول و مناسب از این قابلیت استفاده بشه. همیشه در نظر داشته باشین که سادگی و خوانایی کدها از اولویت‌های اصلیه.
مثال کدی برای نشاندن
حالا بیاین با هم یک مثال ساده بسازیم تا بهتر متوجه بشیم چطور می‌تونیم از نشاندن استفاده کنیم و چطور کارمون رو راحت‌تر میکنه.
.button {
background-color: #4CAF50;
color: white;
.icon {
margin-right: 5px;
}
&:hover {
background-color: #45a049;
}
}
توضیح کد خط به خط
.button
این کلاس اصلی دکمه رو تعریف میکنه و رنگ پس‌زمینه و رنگ متن رو مشخص میکنه.
.icon
این کلاس، زمانی که درون کلاس .button قرار می‌گیره، مارجین راست به ایکون اضافه میکنه.
&:hover
این انتخابگر، وقتی دکمه هاور میشه یا نشانگر موس روی دکمه میاد، رنگ پس‌زمینه رو تغییر میده.