فریم‌ورک‌های محبوب و کاربردی Css

 در مقاله  ساختار اصلی صفحات وب‌سایت  بررسی کردیم که ساختار اصلی همه صفحات وب سایت با html  ساخته می‌شود و با کمک Css  به این ساختار استایل‌های اعمال می‌شود تا صفحه زیباتر و از نگاه کاربر کاربردی‌تر شود.

اما اگر اقدام به یادگیری Html , css  کرده باشین٫ میبینید که نوشتن Css  برای یک وب سایت زمان بر است و آن طور که باید و شاید در مروگر‌ها و دستگاه‌های مختلف واکنش‌گرا نیست و این مشکل بزرگی است که باید به آن رسیدگی کنیم ولی راه حل چیست؟

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

برای مثال ساخت یک منو (Navbar) به کد Css  و جاوااسکریپت نیاز دارد تا نسبت به ابعاد مانیتور‌ها واکنش گرا باشد. اگر شما یک برنامه‌نویس فرانت‌اند میدلول باشید شاید ۱ الی ۲ ساعت کد زدن این منو برای شما زمان بر باشد اما اگر از فریم‌ورک‌ها استفاده کنید این زمان به ۵ الی ۱۰ دقیقه کاهش می‌یابد. چرا؟؟؟

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

مثال منو یک مثال بسیار کوچک از توانایی فریم‌ورک‌هاست. فریم‌ورک‌ها به دست برنامه‌نویسان حرفه‌ای ایجاد می‌شوند از همین رو استانداردهایی مثل material design که هر ساله برای طراحان وب توسط گوگل ارائه می‌شوند را در کد‌های خود رعایت میکنند.

چرا باید از فریم‌ورک‌های css  استفاده کنید

• سرعت فرایند آماده سازی وب سایت را افزایش میدهد.
• کد‌های شما به  هر مرورگر٫ سیستم‌ عامل و دستگاه واکنشگرا می‌شود.
• نگه‌داری از کد را بسیار راحت‌تر میکند

امروزه فریم‌ورک‌های بسیاری برای css  طراحی شده‌اند که با یک سرچ ساده نمی‌توانید به بهترین گزینه برای استفاده در پروژه‌های خودتان برسید برای همین من این مقاله را آماده کردم که طبق آمارهای موجود در سایت‌های GitHub  و StackOverflow بتوانیم به گزینه‌های مناسبی برای استفاده شما برسیم. 

این نکته را در نظر داشته باشید که یکی از ویژگی‌های مهم برای انتخاب فریم‌ورک مناسب برای css ٫ سایز فایل‌های فریم‌ورک است. فریم‌ورک باید به شما کمک کند اگر فایل‌های فریم‌ورک سنگین باشد یعنی که ما انتخاب مناسبی نداشتیم برای همین من از وب سایت bundlephobia  استفاده میکنم تا اندازه‌ فایل‌های فریم‌ورک را هم با هم بررسی کنیم.

Tailwind 

اولین و گل سرسبد فریم‌ورک های Css ٫ Tailwind  است. Tailwind   بین برنامه‌نویسان بسیار محبوب است چون جامعه (community)  فعالی دارد. اگر به دنبال هرچیزی با Tailwind  باشید با یک سرچ در اینترنت به کد‌هایی زیادی برای پیاده سازی آن میرسید. نکته مهم بعدی در مورد Tailwind  ٫ قابلیت. شخصی سازی بالاست. تا کوچک‌ ترین بخش‌های Tailwind   را میتوانید شخصی سازی کنید. Tailwind  بسیار سبک است. اگراز نسخه کم حجم (minified) آن استفاده کنید ٫ حجم آن  فایل ۱.۷۷ کیلوبایت است و با اینترنت 2G  در ۲۵ میلی‌ ثانیه لود می‌شود.

چرا باید از Tailwind  استفاده کنیم؟

• قابلیت شخصی سازی بالایی دارد
• تم پیش‌ فرض ندارد و میتوانید سایت خود را از صفر و طبق نظر خودتان بسازید
• فایل کم حجم
• داکیومنت کامل
• جامعه فعال

 میتوانید برای کسب اطلاعات بیشتر از داکیومنت رسمی Tailwind   استفاده کنید.

Bootstrap

طبق آمارهای github  ٫ Bootstrap محبوب‌ترین فریم‌ورک برای CSS است. این فریم‌ورک جامعه‌ای برنامه‌نویسان را در خود دارد که از Tailwind هم بزرگ‌تر است. برای تمامی نیاز‌های شما داکیومنت رسمی Bootstrap کفایت میکند اما اگر چیزی فراتر از داکیومنت‌ها میخواهید دقیقا در بهترین نقطه ایستاده اید. Bootstrap جامعه‌ای بزرگ و فعال دارد که جوابگوی تمامی نیاز‌‌های شماست. چه از نظر آموزش یا نمونه کد آماده Bootstrap بهترین گزینه‌ است. Bootstrap با کمک جاوااسکریپت و SASS  کنترل بیشتری برای شما فراهم میکند تا بتوانید کارکرد و ظاهر همه کامپوننت‌های Bootstrap را طبق نیاز خود سفارشی سازی کنید.

چرا باید از Bootstrap استفاده کنیم؟

• Bootstrap دارای تعداد زیادی نمونه کد و طرح‌های اماده فقط در داکیومنت رسمی خود است که می‌توانید از آن برای وب‌سایت خود استفاده کنید
•  کاموپننت‌ها در Bootstrap به خوبی باهم ترکیب می‌شوند و کارکرد‌های خود را حفظ میکنند.
• Bootstrap بر اساس MIT License است. این گواهی‌نامه یعنی استفاده از Bootstrap برای همیشه رایگان است و شما میتوایند در توسعه آن نقش داشته باشید (open source)

Foundation

Foundation یکی از فریم‌ورک‌های پیشرفته برای Css است. این فریم‌ورک با css  و جاوااسکریپت ساخته شده و در خود sass complier  دارد تا کد های Sass  را هم به فریم‌ورک اضافه کند. به طور کلی استفاده از این فریم‌ورک برای افرادی که تازه وارد دنیای برنامه‌نویسی شده اند پیشنهاد نمی‌شود چون استفاده از این فریم‌ورک چالش‌های خودش را دارد.

چرا باید از Foundation استفاده کنید?

• Foundation یکی از پیشرفته‌ترین فریمورک‌های css است.
• Foundation ماژولار است
• آپدیت‌های بروزی دارد تا از جدیدترین تکنولوژی ها بهره‌مند باشد

حرف آخر 

این ۳ موردی که بالا معرفی کردم از محبوب ترین فریمورک های css  هستند که در بیشتر وب سایت های بزرگ از آن‌ها استفاده شده است. اما شما می‌توانید در گوگل سرچ کنید و گزینه‌های دیگری را هم بررسی کنید. در بررسی و انتخاب خود موارد زیر را هم دخیل کنید.

 فریم‌ورک خوب :

• باید جامعه خوب و فعالی داشته باشد
• باید فایل‌های کم حجمی داشته باشد
•  باید بصورت مستمر آپدیدت شود

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

برای دوستانی قصد یادگیری فریمورک های  cssرا دارند  Bootstrap را پیشنهاد میکنم  چون منابع آموزشی زیادی برای آن در اینترنت است.  اگر در مورد محتوای مطرح شده در مقاله انتقاد یا سوالی دارید از طریق ایمیل [email protected] با من در ارتباط باشید.

با آرزوی موفقیت٫  علی امیری

Powered by Froala Editor