من یک کاربر قدیمی TailwindCSS و به طور کلی از طرفداران بزرگ CSS ابزار هستم. من به ندرت نیاز شدیدی به تغییر احساس کرده ام، اما UnoCSS برای مدتی در ذهن من بوده است. من شروع به استفاده درست از آن کردم، بنابراین فکر کردم جالب است که نظراتم را در مورد هر دو با جزئیات بنویسم.
این مقاله شامل بسیاری از چیزهای کوچک کوچک است که ممکن است برای دیگران مهم نباشد، اما برای من، هرچه بیشتر بتوانم ریزاصطکاک را کاهش دهم، بهتر است.
امکانات
Tailwind تقریباً برای هر ویژگی CSS که فکرش را می کنید، نام کلاس دارد، از جمله موارد مفیدی که ممکن است درباره آنها ندانید، مانند isolation. حتی برای مواردی که گم شده‌اند، با مقادیر، انواع و ویژگی‌های دلخواه، اکثر برنامه‌ها را می‌توان سر تا پا بدون فایل یا افزونه‌های CSS سفارشی استایل کرد.
Uno از تمام Tailwind پشتیبانی می‌کند، به‌علاوه برخی از موارد اضافی جعبه که من واقعاً از آنها استقبال می‌کنم، مانند گروه‌های مختلف، ستون‌های سیال با شبکه CSS، و بسیاری انیمیشن‌های بیشتر.
Uno همچنین دارای یک تبدیل انتخابی «attributify» است، اما من شخصاً ترجیح می‌دهم نام کلاس‌هایم در یک ویژگی مجزا از props باقی بماند. هر چند این یک ایده شسته رفته است.
زبان
Tailwind یک زبان کاملاً تعریف شده برای نام کلاس ها دارد:
وجود ندارد مشخصات فی نفسه، اما من متوجه شده ام که این یک سیستم بسیار “قابل حدس زدن” است. بر اساس نحوه کار اسامی کلاس های دیگر، مواردی مانند این را امتحان می کنید grid-cols-[4rem,1fr,auto] و فقط کار می کند™️.
در مقابل، پیش‌تنظیم پیش‌فرض Uno Regex است. هیچ “زبان” واقعی وجود ندارد، و هیچ استانداردسازی وجود ندارد، به عنوان مثال m4 و m-4 هر دو یک کار را انجام می دهند
این از سوی Uno عمدی است. Uno همه چیز در مورد انعطاف پذیری است. اما من همچنان گاردریل‌های Tailwind و روش‌شناسی را ترجیح می‌دهم.
این نکته تا حدودی قابل بحث است زیرا می توان از زبان Tailwind با Uno استفاده کرد. این، و Uno احتمالاً به عنوان یک چارچوب برای پیاده سازی بهتر عمل می کند زبان خودت بالای آن صرف نظر از این، اگر به آن و از پیش تعیین شده پیش‌فرض آن به‌عنوان ابزار سرزمین کاربر برای استایل‌سازی برنامه‌ها نگاه کنم، این ارزیابی من است.
مستندات
هر دو سایت اسناد زیبا، خوش نوشته و بسیار قابل استفاده هستند. اما من می‌خواهم یک فریاد ویژه به اسناد تعاملی Uno بدهم، و تغییر رنگ لهجه درخشان است. ممکن است آن را بدزدد 🤭
سبک های سفارشی
در اینجا نمونه ای از یک پلاگین سفارشی در Tailwind آمده است:
// adds s-* utilities to apply both width and height
plugin(function size(api) {
api.matchUtilities(
{ s: (value) => ({ width: value, height: value }) },
{ values: api.theme("width") },
)
}),
در اینجا (تقریبا) همان چیزی است که در Uno وجود دارد:
// `s-*` classes to set width and height
[
/^s-(\d+)$/,
([, size]) => ({
width: `${Number(size) / 4}rem`,
height: `${Number(size) / 4}rem`,
}),
{ autocomplete: "s-<num>" },
],
برای هر دوی اینها، کلاس s-4 سبک ها را خواهد داد width: 1rem; height: 1rem.
API پلاگین Tailwind در طول سال ها بسیار زیباتر شده است. افزودن ابزارهای ساده آسان است و موارد پیچیده تر مانند این مثال نیز چندان بد نیستند.
Uno به شدت از regex برای ابزارهای پویا استفاده می کند که مستعد خطا است. Uno تعریف ابزارهایی را تشویق می‌کند که می‌توانند هر ارزشی را که شما به آن می‌دهید دریافت کنند، که نیاز به آن را کاهش می‌دهد [] نحو مقدار دلخواه اما من همچنان ترجیح می‌دهم چگونه Tailwind شما را به مجموعه‌ای از مقادیر خاص محدود کند.
کنار: نحو مقدار دلخواه Tailwind همچنین به شما امکان می دهد از هر مقداری استفاده کنید. اما اسناد، به علاوه نحو مورد نیاز برای استفاده از آن، آنها را از استفاده منصرف می کند. من نگهبان واضح و اجباری “این در سیستم طراحی وجود ندارد” را دوست دارم.
در مقابل، Uno کم و بیش تشویق می کند کاربران از هر مقداری که می خواهند استفاده کنند. اگرچه از نظر فنی می‌توانید یک سیستم طراحی محدودتر در Uno بسازید، این جهش‌های بیشتری از آنچه با Tailwind دریافت می‌کنید است.
پشتیبانی ویرایشگر
پشتیبانی ویرایشگر Tailwind بسیار خوب کار می کند، اما دارای چند شکاف است:
- عدم آگاهی از کلاس های سفارشی در فایل های CSS
- هنگام استفاده نام کلاس ها را تکمیل نمی کند
@applyدر افزونه ها - شما باید یک گزینه “تجربی” را با regex سفارشی پیکربندی کنید تا زمینه های تکمیل را در جای دیگری دریافت کنید، و باید مسائل و بحث ها را بررسی کنید تا دستور پخت مورد نظر خود را پیدا کنید. کدام هنوز ممکن است در همه موارد کار نکند، زیرا… می دانید، Regex 🫠
این مسائل استفاده مجدد از سبک ها را خسته کننده می کند @apply یا با رشته های نام کلاس در JS.
نویسندگان Tailwind استفاده از آن را توصیه نمی کنند
@applyدر مجموع، اما هنوز آن را برای عناصر اتمی کوچک مانند دکمه‌ها، ورودی‌ها و پیوندها مفید می‌دانم.
Uno نام کلاس ها را برجسته می کند و نکات رنگی می دهد هر کجا، اگر نام کلاس ها را در رشته های مستقل به اشتراک می گذارید خوب است، اما دیدن آن که “transition” را برجسته می کند خنده دار است. const transition = useTransition().
با گسترش، پشتیبانی از ویرایشگر Uno نیز در آن کار می کند uno.config.ts، که برای اضافه کردن نام کلاس های سفارشی استفاده مجدد بسیار خوب است.
هشدار: باید اضافه کنید
// @unocss-includeدر بالای فایل کانفیگ قرار می گیرد تا نام کلاس ها در آن کامل شود. این به خوبی با Remix و PostCSS کار می کند، اما ممکن است در تنظیمات دیگر خراب شود. TBH پلاگین باید از این OOTB پشتیبانی کند
با این حال، تکمیل خودکار Uno از برخی جهات دشوار است:
- اغلب تا زمانی که یک ابزار کامل را تایپ نکنید، گزینه هایی برای تکمیل خودکار دریافت نمی کنید
- - میانبرها همیشه به صورت خودکار تکمیل نمی شوند و دلیل آن واقعاً مشخص نیست
- تکمیل خودکار در یک گروه متغیر به عنوان مثال
hover:(|)کار نمی کند مگر اینکه یک فاصله در آن قرار دهیدhover:(| )
گذشته از این، من تجربه کلی ویرایشگر Uno را بدون اصطکاک بیشتر از tailwind دریافتم.
Tailwind و Uno نقاط قوت و ضعف خود را دارند. من از محدودیت‌های Tailwind و زبان نوشتن واضح‌تر قدردانی می‌کنم، اما اگر برای انعطاف‌پذیری و ویژگی‌های اضافی ارزش قائل هستید، احتمالاً Uno را دوست خواهید داشت. Uno همچنین از زمان نوشتن تجربه ویرایشگر بهتری دارد، اما شاید این تغییر کند! من هر دوی آنها را از نزدیک تماشا خواهم کرد. 👀
تذکرات ارجمند:
- MasterCSS: واقعاً من را جذب نکرد. به نظر می رسد اصلاً تمرکز زیادی روی محدودیت ها ندارد و زبان آن خیلی ارگونومیک نیست.
- Twind: افزونه ویرایشگر هنوز برای کار با آخرین نسخه به روز نشده است
- TypeWind (و موارد مشابه): من بسیار از تلاش برای داشتن DX خوب بدون افزونه ویرایشگر اضافی قدردانی می کنم، اما نام کلاس های مبتنی بر TS هستند. خیلی غیر ارگونومیک 😅
