پراپهای استایل، دیزاینسیستم نیستن
فرانتاندClaude Opus 5خلاصهٔ کاملتر
نویسنده تو این پست میگه انعطاف زیاد UI kitها خودش دردسره: وقتی میشه رادیوس و رنگ و سایز و یه دیوار کلاس Tailwind رو همون جایی که کامپوننت رو صدا میزنی پاس بدی، هر بار داری یه تصمیم استایل یکبارمصرف میگیری. اسم این کارو میذاره inlining، یعنی تصمیم ظاهر رو سر محل فراخوانی گرفتن؛ فرقی نداره با اتریبیوت style باشه یا style props یا کلاسهای یوتیلیتی.
به گفتهٔ نویسنده، این سبک سه تا مشکل بنیادی داره: نمیتونی حتی تو یه فایل یکدستی بصری رو تضمین کنی، کد هیچ معنایی نداره که بفهمی چی به چیه، و چون سیستمی پشتش نیست نگهداریش سخته. میگه حتی با LLM هم زود جمع نمیشه، چون این سبک پرخطا کلی رفتوبرگشت لازم داره تا درست دربیاد.
جایگزین پیشنهادیش variantه: یه استایل خودبسنده که کل ظاهر کامپوننت رو با یه اسم معنادار توصیف میکنه، از هندسهٔ داخلی تا رنگ و تایپوگرافی. تأکید داره که variant نباید منتظر هیچ استایل بیرونی بمونه، نه ریست سراسری نه یه font-family سرگردون:
<Button variant="primary">Save changes</Button>
<Button variant="secondary">Cancel</Button>برای تغییرهای کوچیک هم modifier رو میگه: مثلاً variant ظاهر دکمه رو تعیین کنه و یه modifier به اسم size هندسهش رو. نکتهش اینه که modifier بخشی از API خود کامپوننته، نه یه در پشتی برای دور زدن variant. اگه دیدی داری چند تا modifier رو با هم روی یه کامپوننت میریزی، یعنی اون ترکیب تکراری اسم خودشو میخواد و باید بشه یه variant تازه.
چرا پاس دادن پراپهایی مثل radius و fontSize بده؟ چون از بیرون variant رو بازنویسی میکنن و دیگه variant تعیینکنندهٔ ظاهر نهایی نیست. بدترش اینه که این بازنویسیها variant رو دنبال نمیکنن: همین که variant رو عوض کنی یا یه پالت رنگ جدید بیاری، بیصدا از هماهنگی درمیان. نویسنده میگه همین قاعده رو با CSS خام و BEM، با CSS Modules تو Mantine و با recipeهای Chakra هم میشه پیاده کرد.
نکات کلیدی:
- variant یعنی یه استایل کامل و خودبسنده با اسم معنادار، بدون وابستگی به استایل بیرونی
- modifier مثل size بخشی از API کامپوننته، نه راه دور زدن variant
- چند modifier همزمان روی یه کامپوننت، یعنی وقتشه یه variant جدید بسازی
- پراپهای استایل از بیرون variant رو بازنویسی میکنن و با تغییر تم بیصدا از هماهنگی درمیان
- همین الگو تو BEM، تو CSS Modules ی Mantine و تو recipeهای Chakra هم جواب میده
