با دو تابع جدید و قدرتمند در دنیای CSS یعنی sibling-index() و sibling-count() آشنا شوید. این دو تابع که به‌تازگی معرفی شده‌اند، راهی کاملاً جدید و منعطف برای شمارش و مدیریت عناصر هم‌نیا (Sibling) در ساختارهای درختی DOM ارائه می‌دهند و قرار است طرز کار توسعه‌دهندگان با لیست‌ها و گریدها را متحول کنند.
یکی از جذاب‌ترین کاربردهای این توابع، ایجاد افکت آبشاری پلکانی (Staggered Cascade) تنها با یک خط کد CSS است؛ چیزی که تا پیش از این نیازمند قواعد پررمز و گشاد :nth-child() یا راهکارهای پیچیده جاوااسکریپتی بود. اکنون می‌توانید بدون نوشتن کدهای اضافی، انیمیشن‌های زیبا و ترانزیشن‌های منظم را روی عناصر اعمال کنید.
اما نکته کلیدی اینجاست: این توابع به‌خوبی مقیاس‌پذیرند. فرقی نمی‌کند پروژه شما ۵ المان داشته باشد یا ۵,۰۰۰ المان؛ sibling-index() و sibling-count() با همان کارایی و سرعت اولیه کار می‌کنند. این یعنی دیگر نگران افت عملکرد در لیست‌های طولانی نخواهید بود و می‌توانید روی خوانایی و سادگی کد خود تمرکز کنید.
به نقل از کدیران ورود این دو تابع به دنیای CSS نشان‌دهنده یک تغییر رویکرد اساسی در طراحی وب است؛ حرکت از راهکارهای هَکی و وابسته به جاوااسکریپت، به سمت ابزارهای بومی، اعلانی (Declarative) و کارآمد. برای تیم‌های توسعه‌دهنده این یعنی کدهای تمیزتر، نگهداری آسان‌تر و کاهش چشمگیر حجم جاوااسکریپت در پروژه‌ها. در گذشته، بسیاری از ما برای اجرای افکت‌های پلکانی به کتابخانه‌ها یا کدهای DOM وابسته بودیم، اما اکنون مرورگرها خودشان این منطق ریاضی را مدیریت می‌کنند. از منظر کسب‌وکار و کدیران، این تحول می‌تواند زمان توسعه رابط‌های کاربری پیچیده را به‌طور قابل توجهی کاهش دهد و به تیم‌های استارتاپی اجازه دهد محصولاتی سریع‌تر و سبک‌تر بسازند. پیش‌بینی می‌شود با پخش شدن این قابلیت میان مرورگرهای اصلی، شاهد ورود مجدد طراحی‌های پویا و انیمیشن‌های ساختاریافته باشیم که تاکنون به دلیل هزینه‌ی عملکردی کنار گذاشته شده بودند. همچنین این توابع می‌توانند در معماری‌های مدرن مانند میکرو فرانت‌اند و طراحی مبتنی بر کامپوننت، به یک استاندارد جدید تبدیل شوند. توصیه ما این است که پروژه‌های فعلی خود را بازنگری کنید تا ببینید کجا می‌توانید با جایگزینی :nth-child() یا کدهای جاوااسکریپتی، خوانایی و کارایی کدتان را ارتقا دهید.