آشنایی با @function در CSS و تجربهی توسعهاش
فرانتاندClaude Sonnet 4.6خلاصهٔ کاملتر
نویسنده توضیح میده که CSS تابع اضافه کرده تا توسعهدهندهها بتونن رفتار پراپرتیها رو بدون تکرار کد یا شلوغکردن DOM با متغیرهای میانیِ یکبارمصرف، بستهبندی و دوباره استفاده کنن. یه تابع ساده با @function --hello-world() تعریف میشه و یه result برمیگردونه. به گفتهی نویسنده، این مقالهی پایهای یهسری «gotcha» یا تله رو پوشش میده که مثل حفاظ کنار خط بولینگان تا تو مقالهی بعدی استرایک بزنیم. اولین تله اینه که فعلاً هر تابع فقط یک مقدار پراپرتی (یا حتی بخشی از اون) رو میتونه برگردونه.
یکی از قابلیتهای خوب، بستهبندی یا encapsulationـه: میتونی داخل تابع متغیرهای میانی بسازی که روی عنصر بیرون درز نمیکنن. نویسنده تاکید میکنه این متغیرها اونقدر خصوصیان که حتی ثبت سراسری با @property هم نمیتونه تایپشون کنه؛ یه --a داخل تابع کاملاً جدا از --a بیرونه.
بخش آرگومانها چند تلهی مهم داره. نویسنده میگه اگه تابع رو با آرگومانِ بیشتر از تعداد تعریفشده صدا بزنی، بهجای یه خطای مفید، بیصدا شکست میخوره و چیزی برای دیباگ بهت نمیده. صدا زدن با آرگومانِ کمتر هم همینطوره. راهحل دادن مقدار پیشفرض به آرگومانهاست که اونوقت اختیاری میشن. به نظر نویسنده مقدار initial بهعنوان پیشفرض مخصوصاً مفیده، چون اجازه میده با var(--arg, fallback) رفتار تابع رو شاخهشاخه کنی.
یه نکتهی واقعاً ارزشمند که نویسنده برجسته میکنه، مزیت تایپکردن آرگومانهاست: متغیر تایپشدهی داخل تابع اگه مقدارش به اون تایپ تبدیل نشه initial میشه، یعنی فالبکهای محاسبهشده کار میکنن — برخلاف رفتار سراسری که اونجا ارجاع به یه متغیر ثبتشده با var() باعث میشه فالبک خود var() غیرقابلدسترس بشه. این تفاوت مهمیه: تو تابع، یه ورودی نامعتبر باعث اجرای شاخهی فالبک میشه، نه نادیدهگرفتهشدنش.
یه تلهی دیگه دربارهی آرگومانهای جداشده با کاماست. نویسنده میگه تنها جایی تو کل CSS که یه متغیر سرجاش باز نمیشه، همینجاست: موقع پاسدادن یه var() چندمقداری به یه تابع سفارشی، همهی مقدارها تو اولین آرگومان چپونده میشن. یه سینتکس پیادهسازیشده برای ضدِ پخششدن هست که با گذاشتن آرگومانها داخل آکولاد ({ }) جلوی این رو میگیره. نویسنده پیشنهاد میکنه آرگومانهای کامادار رو همین حالا داخل آکولاد بپیچی تا برای وقتی که رفتار درست برمیگرده آماده باشی.
بخش نتایج تابع چند محدودیت دیگه هم داره. میشه با returns تایپ خروجی رو مشخص کرد و اگه result با اون نخونه، تابع initial برمیگردونه. توابع میتونن توابع دیگه رو صدا بزنن، ولی فعلاً نمیتونن خودشون رو صدا بزنن چون CSS بازگشت رو چرخهای میبینه و به initial میافته. نویسنده یه باگ نگرانکنندهی دیگه رو هم نشون میده: نمیتونی خروجی یه تابع رو دوباره به همون تابع پاس بدی، ولی اضافه میکنه که طبق پیگیریها این یه باگ سطح-اسپک شناخته شده و قراره بهزودی درست شه.
جمعبندی نویسنده اینه که تجربهی توسعهی توابع سفارشی CSS فعلاً «خوب نیست»، ولی پتانسیل زیادی داره و خیلی کارها رو همین حالا میشه باهاش انجام داد، حتی اگه بیشترش سطحیه. این تازه پایهست و قراره دفعهی بعد سراغ موضوع هیجانانگیزترش یعنی Scope توابع CSS بره.
نکات کلیدی:
- با @function میشه رفتار پراپرتیها رو بستهبندی و بدون تکرار کد دوباره استفاده کرد
- فعلاً هر تابع فقط یک مقدار پراپرتی برمیگردونه
- متغیرهای داخل تابع کاملاً خصوصیان و حتی @property هم تایپشون نمیکنه
- صدا زدن با تعداد آرگومان نادرست بیصدا شکست میخوره؛ مقدار پیشفرض اون رو اختیاری میکنه
- آرگومان تایپشده اگه نامعتبر باشه initial میشه و فالبک محاسبهشده اجرا میشه
- بازگشت (recursion) و پاسدادن خروجی تابع به خودش فعلاً کار نمیکنه، ولی در حال درستشدنه
