به گزارش Smashing Magazine، جایگزین‌کردن JavaScript با قابلیت‌های مدرن CSS همیشه به معنای ساده‌ترشدن کل پروژه نیست. گابریل شویومبو در مطلبی که ۳ نوامبر ۲۰۲۶ منتشر شد، هشدار می‌دهد تقسیم منطق میان CSS و JavaScript می‌تواند عیب‌یابی و نگهداری اپلیکیشن را دشوارتر کند؛ حتی اگر حجم کد در یک فایل کاهش یابد.
کد کمتر، الزاماً سیستم ساده‌تر نیست
این بررسی میان «سادگی محلی» و «پیچیدگی سیستم» تفاوت می‌گذارد. یک قابلیت تازه ممکن است چندین خط JavaScript را حذف کند، اما هم‌زمان با چیدمان کامپوننت، CSS Cascade، قوانین قدیمی و موتور رندر مرورگر وارد تعامل شود. در نتیجه، تغییری کوچک می‌تواند توسعه‌دهنده را برای یافتن یک خطا به بخش‌های مختلف پروژه بفرستد.
در نمونه مطرح‌شده، تیمی چیدمان واکنش‌گرای یک کارت را با container query و انتخاب‌گر :has() بازنویسی می‌کند. باقی‌ماندن observer و کلاس قدیمی باعث تداخل می‌شود؛ اعمال inline-size containment نیز در بعضی چیدمان‌های Flex عرض کارت را به صفر می‌رساند. از سوی دیگر، یک انتخاب‌گر گسترده می‌تواند روی عناصر داخلی ناخواسته اثر بگذارد و هزینه بازمحاسبه استایل را افزایش دهد.
آزمایش نویسنده در Chrome نشان داد دو قانون مبتنی بر :has() هنگام انتخاب یک ردیف در فهرست ۵ هزار ردیفی، ۵۰۰۱ عنصر را دوباره استایل‌دهی کردند و حدود ۷ میلی‌ثانیه زمان بردند. با افزایش فهرست به ۲۰ هزار ردیف، این زمان به حدود ۳۱ میلی‌ثانیه رسید. نویسنده تأکید می‌کند این اعداد مربوط به یک صفحه، یک مرورگر و یک دستگاه‌اند و باید الگو را جدی گرفت، نه اینکه نتایج را به همه پروژه‌ها تعمیم داد.
شش پرسش پیش از مهاجرت به CSS جدید
پیشنهاد اصلی این است که مسئول هر رفتار دقیقاً مشخص باشد: CSS برای نمایش وابسته به اندازه یا ساختار DOM و JavaScript برای وضعیت اپلیکیشن و عملیات ناهم‌زمان. پس از مهاجرت نیز observerها، کلاس‌ها و انتخاب‌گرهای قدیمی باید کامل حذف شوند تا دو پیاده‌سازی هم‌زمان یک رفتار را کنترل نکنند.
تیم‌های فرانت‌اند بهتر است پیش از ادغام تغییر، مالکیت رفتار، دامنه اثر، جایگاه قانون در Cascade، کامل‌بودن مهاجرت، عملکرد روی داده واقعی و امکان نگهداری را بررسی کنند. مقایسه بخش‌های Recalculate Style، Layout و Paint در Chrome DevTools پیش و پس از تغییر نیز نشان می‌دهد انتقال منطق واقعاً بهبود ایجاد کرده یا فقط محل پیچیدگی را عوض کرده است.
جمع‌بندی این بررسی مخالفت با CSS مدرن نیست. container query و :has() ابزارهای قدرتمندی هستند، اما زمانی سیستم را ساده‌تر می‌کنند که مالکیت رفتار روشن، دامنه انتخاب‌گر محدود و اثر عملکردی تغییر اندازه‌گیری شده باشد.
