من از روزهای اولیه UnoCSS استفاده کرده ام و از انعطاف پذیری بی حد و حصر آن کاملا شگفت زده شده ام. با این حال، انعطاف پذیری قیمت دارد و می تواند شما را به سوء استفاده سوق دهد.
توجه داشته باشید که این پست بر روی UnoCSS با استفاده از تنظیمات پیش‌فرض تمرکز می‌کند: Uno، Attributify و Tagify.
راه های استفاده از UnoCSS
قبل از شروع، بیایید روش‌هایی را که می‌توانیم از UnoCSS با پیش‌تنظیمات اصلی استفاده کنیم، مرور کنیم:
-
کلاس ها
<div class="dark:bg-gray-900"> -
ویژگی های
<div dark="bg-gray-900"> -
برچسب ها
<dark-bg-gray-900>
ویژگی های
پیش‌تنظیم attributify به شما اجازه می‌دهد تا از ویژگی‌های HTML به جای کلاس‌های CSS استفاده کنید تا زمانی که در محدوده‌های Unicode پشتیبانی شده توسط مشخصات قرار دارند.
با این حال، این بدان معنا نیست که کاملاً به استاندارد HTML پایبند است. برای مثال کد زیر:
<div dark="bg-gray-950">
آی تی از نظر فنی در مرورگرهای مدرن کار می کند، اما اگر یک اعتبار سنج را اجرا کنید، متوجه خواهید شد که “تاریک” یک ویژگی معتبر نیست. div برچسب ها
چرا این طور است؟ ویژگی‌های سفارشی می‌توانند با ویژگی‌های HTML آینده تضاد داشته باشند و باعث رفتار غیرمنتظره یا مشکلات رندر شوند.
استفاده از ویژگی های data-*
پس چه کار کنیم؟ data-* ویژگی ها به ما این امکان را می دهند که تگ های HTML را با هر ویژگی غیر استانداردی که فکرش را می کنیم گسترش دهیم. البته این امر در مورد ابزارهای تولید شده توسط UnoCSS نیز صدق می کند.
<div data-dark="bg-gray-950">
به طور پیش‌فرض، پیش‌تنظیم attributify آنها را پشتیبانی نمی‌کند، اما می‌توانید با استفاده از این پیکربندی آن را اعمال کنید:
presetAttributify({
prefix: 'data-', // or 'data-un-'
prefixedOnly: true,
})
مشکل حل شد!
برچسب ها
برچسب ها نیز مشکل مشابهی دارند. عناصر HTML سفارشی باید این قوانین را دنبال کنید:
- نام یک عنصر سفارشی باید حاوی خط فاصله (“-“) باشد.
- نام باید با حرف (az یا AZ) شروع شود.
- نام می‌تواند شامل حروف کوچک (az)، حروف بزرگ (AZ)، ارقام (0-9)، خط تیره (“-“) باشد و نباید حاوی هیچ فاصله سفید یا کاراکتر خاصی باشد.
خط فاصله
اکثر برنامه های کاربردی مانند <text-red-300> خوب کار می کند، اما برچسب های پیشوند مانند dark: یا print: ممکن است مشکل ساز باشد، زیرا کولون ها پشتیبانی نمی شوند. در واقع، tagify اصلا کار نخواهد کرد!
فرض کنید این مثال را داریم:
<dark:text-red-300>
باید کولون را با خط فاصله جایگزین کنیم:
<dark-text-red-300>
پیشوندها
بسیاری از ابزارهای برقی مانند <flex> یا <hidden>، حاوی خط تیره نباشند زیرا از تک کلمات تشکیل شده اند. تقسیم آنها، به عنوان مثال به، منطقی نیست.
در عوض، می توانیم از پیشوند فضای نام استفاده کنیم:
presetTagify({
prefix: 'un-'
})
این به این معنی است که شما می توانید برنامه های کاربردی مانند <un-flex> یا <un-dark-flex> و آسوده خاطر باشید زیرا هیچ عنصر جدیدی حاوی خط فاصله به مشخصات HTML اضافه نخواهد شد.
