آنچه شما باید بدانید تا بهترین پردازنده فریم ورک یا CSS را برای خود انتخاب کنید

آیا می دانید چگونه انواع فریم ورک ها، lib ها و پردازنده های CSS را متمایز کنید؟

آیا می توانید تشخیص دهید که آنها برای چه هستند؟

در این مقاله قصد دارم کمی بیشتر دنیای این فناوری‌ها را بررسی کنم و این که چگونه هدف آنها بسیار فراتر از “عصا” بودن آن‌طور که برخی می‌گویند است.

الحاقیه
من فریمورک‌های CSS-in-JS را پوشش نمی‌دهم، زیرا آن‌ها موردی برای قسمت دیگری هستند!

ابتدا به تنظیمات

• چارچوب ها ارائه اکوسیستمی از ابزارهای سبک، از توکن های طراحی تا اجزای کامل و ابزار مبتنی بر جاوا اسکریپت
• Libs اساسا سبک های از پیش نوشته شده در فایل های css خارجی هستند
• پیش پردازنده ها CSS را با ابزارها، عملکرد یا نحو متمایز تغییر دهید که سپس به CSS کامپایل می شود

خط بین libs و چارچوب ها بسیار نازک است و من هیچ سودی در تلاش برای تمایز بین آنها نمی بینم.
OpenProps متغیرهای CSS از پیش ساخته شده را ارائه می دهد که می توانند به صورت lib مشاهده شوند. اما می‌تواند همراه با تنظیمات PostCSS برای استفاده از ابزارهای JIT و پشتیبانی از پرسش‌های رسانه‌ای سفارشی، به آن ظاهری چارچوب‌مانند بدهد.

فایده واقعی به نظر من در درک قالب و هدف هر نوع از هر ابزار است.
با تعمیم سبک آزاد، چارچوب ها را می توان به موارد زیر تقسیم کرد:

• بازنشانی/نرمال ساز
• سودمند
• اجزاء

نرمال سازهای الکترونیکی را بازنشانی می کند

نمونه ای از reset/normalize Sanitize.css است
هر مرورگر دارای شیوه نامه مخصوص به خود به نام User Agent Stylesheet است.

دو استراتژی اصلی برای مقابله با این سبک مرورگرها عبارتند از:

• برگرداندن همه به حالت اولیه (بازنشانی)
• قالب‌بندی فقط مواردی که بر طرح‌بندی تأثیر می‌گذارند، مانند تنظیمات حاشیه و بالشتک، یا رفع CSS برای اشکالات طرح‌بندی عامل کاربر خاص مرورگر (نرمال‌سازی یا تنظیم مجدد نرم)

نمونه ای از تنظیم مجدد کد زیر است:

* {
  all: unset;
  display: revert;
}

all: unset تمام ویژگی های انتخابگر را به تنظیمات ارثی یا پیش فرض آنها برمی گرداند.

display: revert باعث می شود ویژگی حاوی آن مقدار (نمایش، در این مورد) مقداری را داشته باشد که قبل از تغییر آن از طریق stylesheet داشت. تقریبا یکی ctrl + z ویژگی های CSS

نمونه ای از نرمال سازی SanitizeCSS است

کد منبع SanitizeCSS به خوبی مستند شده است، و منبعی عالی برای مطالعه چگونگی تأثیر CSS از عوامل مختلف کاربر (مرورگرها) بر صفحات ما است.

سودمند

کلاس های Utility اساساً کلاس هایی هستند که از S of SOLID پیروی می کنند – کلاس های از پیش ساخته شده ای که یک کار را انجام می دهند و آن را به خوبی انجام می دهند. نقطه قوت این نوع چارچوب این است که تصمیمات طراحی افراد توسعه دهنده را به حداقل می رساند و سیستم طراحی ثابت را در سراسر پروژه ها حفظ می کند.

نمونه ای از ابزارهای کاربردی باد دم.

<div class="flex font-sans">
  <div class="flex-none w-48 relative">
    <img src="/classic-utility-jacket.jpg" alt="" class="absolute inset-0 w-full h-full object-cover" loading="lazy" />
  </div>
</div>

Tailwind یک چارچوب در نظر گرفته می شود زیرا بخشی از تجربه توسعه آن به دلیل دستورالعمل ها و JIT آن از طریق PostCSS است.

اما آرام باش! هر فریم ورک ابزاری این چیز c*ray را در HTML باقی نمی گذارد

برای مثال OpenProps یک سیستم طراحی را در داخل متغیرهای CSS ارائه می دهد.

علی‌رغم تأثیر ماندلا حباب توسعه‌دهنده باور به اینکه Tailwind چیزی غیر از CSS است، کد منبع برای lib (شما باید dist/ را از طریق tailwind CLI تولید کنید) نمونه‌ای عالی از ترکیب با متغیرهای CSS است. آدام واتهام مقاله بسیار خوبی در این زمینه منتشر کرد.

به هر حال، Tailwind پسر حرامزاده Bootstrap است – به این دلیل به دنیا آمد که واتام دوست نداشت که BS در Sass در نسخه 3 آن بازنویسی شود، او BS خود را در Less نوشت، اما متوجه شد که ابزار CSS آنچه در بین پروژه ها بیشتر حفظ شد.

به هر حال، صحبت از بوت استرپ …

اجزاء

چارچوب های مؤلفه (Ou UI lib)

مانند فریم ورک های کاربردی، فریمورک های کامپوننت یک سیستم طراحی از پیش ساخته شده را ارائه می دهند، اما اجزای کاملی را با عملکرد و همه چیز ارائه می دهند.

چارچوب هایی مانند این برای زمانی که اولویت ارائه عملکرد است، مانند POC ها (اثبات مفهوم) عالی هستند. با فکر کردن به این روش، می‌توانیم طرح‌بندی‌های کاملی را بدون نگرانی برای طراحی اجزا ارائه کنیم.

💡 آیا تا به حال برای قرار دادن بوت استرپ در طراحی خود تلاش کرده اید؟
بنابراین، به این دلیل است که داشتن یک طراحی آماده برخی از اهداف یک چارچوب UI را از بین می برد

کد منبع بوت استرپ به نظر من بهترین مکان روی کره زمین برای مطالعه Sass است. هر تیم طراحی سیستم قبلاً اشتباه کپی کردن Bootstrap Grid را مرتکب شده است، ~آن را هم درست کنید، سالم است!~

پیش پردازنده ها

پردازنده هایی مانند Sass چندین هدف را دنبال می کنند:

• کدهای تکراری را به حداقل برسانید
• اجازه دادن به کامپوننت‌سازی شیت‌ها (همه چیز را بعداً در یک CSS کنار هم قرار می‌دهد)
• استفاده مجدد از سبک ها را آسان می کند
• امکانات معماری را در CSS گسترش می دهد

اما اشتباه نکنید! همانطور که گفتم، آنها به CSS خالص کامپایل می شوند – با همان منطق قبلی، آنها چیزی جز CSS با کمی چاشنی نیستند.

💡 مستندات ساس خیلی خوب کار شده، حداکثر 40 دقیقه مطالعه داره، من خودم همیشه در حال مشاوره هستم. Doc و Sass Guidelines (به زبان پرتغالی نیز موجود است) همه‌ی آن‌هایی هستند که یک برنامه‌نویس برای شروع کار با این زبان نیاز دارد.

با استفاده از فرصت برای معرفی طرح هرمی، مقاله من در مورد نحوه شروع با Sass هنوز بسیار جاری است.

>> پیوند پست درباره شروع کار با Sass

خلاصه اپرا

CSS خالص جالب است و هرگز مشکلی ایجاد نکرده است. فریم‌ورک‌ها، پردازنده‌ها و موارد مشابه مشکلات CSS را حل نمی‌کنند، بلکه نیازهای معماری و توسعه را حل می‌کنند.

اگر کسی خلاف این را به شما می گوید، با دوستانتان او را مسخره کنید.

آنها عصا نیستند، ابزار هستند.
استفاده نکردن از چکش زمانی که نیاز دارید میخ را به دیوار بکوبید، شما را به مزون بهتری نسبت به دیگران تبدیل نمی کند، بلکه باعث می شود.

“ای داداش، من چیزی در مورد آن نمی دانم، آیا من پدر هستم؟”

این را بخوان

شما فریمورک های CSS را نمی آموزید – و هرگز نخواهید آموخت

بیشتر از یک موضوع، یک زواید، دنبال کنید -> 🧵

12:00 – 02 مه 2023

اگر می‌خواهید بدانید کدام فریم‌ورک‌ها بیشترین استفاده را دارند، من نظرسنجی StateOfCSS را توصیه می‌کنم، آخرین مورد مربوط به سال 2022 است.

تا دفعه بعد بچه ها!