لماذا UnoCSS؟
الدوافع
نوصي بقراءة منشور المدونة إعادة تصور CSS الذري الذي كتبه مبتكر UnoCSS، Anthony Fu، للحصول على فهم أفضل للدافع وراء UnoCSS.
كيف يختلف UnoCSS عن X؟
Windi CSS
بدأ UnoCSS بواسطة أحد أعضاء فريق Windi CSS، مع الكثير من الإلهام المأخوذ من العمل الذي قمنا به في Windi CSS. بينما لم يعد Windi CSS قيد الصيانة النشطة (اعتباراً من مارس 2023)، يمكنك اعتبار UnoCSS "الخليفة الروحي" لـ Windi CSS.
يرث UnoCSS طبيعة Windi CSS عند الطلب، وضع attributify، الاختصارات، مجموعات المتغيرات، وضع التجميع وأكثر من ذلك بكثير. بالإضافة إلى ذلك، تم بناء UnoCSS من الصفر مع التركيز على أقصى قدر من التوسع والأداء، مما يمكننا من تقديم ميزات جديدة مثل أيقونات CSS الخالصة، attributify بدون قيمة، tagify، خطوط الويب، إلخ.
الأهم من ذلك، UnoCSS مستخرج كمحرك CSS ذري، حيث تكون جميع الميزات اختيارية، مما يجعل من السهل إنشاء اتفاقياتك الخاصة ونظام التصميم الخاص بك والإعدادات المسبقة الخاصة بك - مع مجموعات الميزات التي تريدها.
Tailwind CSS
أخذ كل من Windi CSS و UnoCSS الكثير من الإلهام من Tailwind CSS. نظراً لأن UnoCSS تم بناؤه من الصفر، يمكننا الحصول على نظرة عامة رائعة حول كيفية تصميم CSS الذري مع الفنون السابقة وتجريده إلى واجهة برمجة تطبيقات أنيقة وقوية. مع أهداف تصميم مختلفة تماماً، ليس الأمر مقارنة مباشرة مع Tailwind CSS. لكننا سنحاول سرد بعض الاختلافات.
Tailwind CSS هو مكون إضافي لـ PostCSS، بينما UnoCSS هو محرك متساوي الشكل مع مجموعة من التكاملات من الدرجة الأولى مع أدوات البناء (بما في ذلك مكون PostCSS الإضافي). هذا يعني أن UnoCSS يمكن أن يكون أكثر مرونة للاستخدام في أماكن مختلفة (على سبيل المثال، وقت تشغيل CDN، الذي يولد CSS على الطاير) ولديه تكاملات عميقة مع أدوات البناء لتوفير HMR وأداء وتجربة مطور أفضل (على سبيل المثال، المفتش).
بصرف النظر عن المقايضات التقنية، UnoCSS مصمم أيضاً ليكون قابلاً للتوسيع والتخصيص بالكامل، بينما Tailwind CSS أكثر تحديداً للرأي. بناء نظام تصميم مخصص (أو رموز التصميم) على رأس Tailwind CSS قد يكون صعباً، ولا يمكنك الابتعاد حقاً عن اتفاقيات Tailwind CSS. مع UnoCSS، يمكنك بناء أي شيء تريده تقريباً مع التحكم الكامل. على سبيل المثال، قمنا بتنفيذ جميع أدوات التوافق مع Tailwind CSS داخل إعداد مسبق واحد، وهناك الكثير من الإعدادات المسبقة الرائعة للمجتمع المنفذة مع فلسفات أخرى مثيرة للاهتمام.
بفضل المرونة التي يوفرها UnoCSS، يمكننا تجربة الكثير من الميزات المبتكرة على رأسها، على سبيل المثال:
نظراً لأهداف التصميم المختلفة عن Tailwind CSS، UnoCSS لا يدعم نظام المكونات الإضافية أو التكوينات الخاصة بـ Tailwind CSS، مما يعني أنه قد يجعل من الصعب الانتقال من مشروع Tailwind CSS مخصص بشكل كبير. هذا هو القرار المقصود لجعل UnoCSS عالي الأداء وقابلاً للتوسيع، ونعتقد أن المقايضة تستحق ذلك.