بهترین Framework ‌های CSS در سال ۲۰۲۰ - بخش اول

در این مقاله به بررسی بهترین Framework ‌های CSS خواهیم پرداخت. هر توسعه‌دهنده‌ی فرانت اندی دو دغدغه‌‌ی بزرگ دارد؛ اولی مربوط به کارایی و مدت زمان مورد نیار برای کدزنی می‌شود و دومی نیز مربوط به سازگاری (compatibility) مرورگرها با موارد جدید آزمایشی. برای رسیدگی درست به هر دوی این اهداف نیاز است تا به یک روش یا متودولوژی طراحی وب روی آورد که برای صرفه‌جویی در زمان و افزایش کارایی و همچنین بهبود تجربه‌ی کاربری مفید باشد.

Cascading Style Sheets یا به اختصار همان CSS، ابزاریست برای طراحی وب که باعث جداسازی محتوای اسناد (HTML) از ویژگی‌های ظاهری آن می‌شود. این اتفاق به شدت باعث کاهش سایز فایل‌های انتقالی می‌شود. زمانی که شما تغییری در فایل CSS سایت خود ایجاد می‌کنید، آن تغییر ممکن است بر روی چندین سند از وب‌سایت شما تاثیر بگذارد. البته که CSS مجموعه‌ای بزرگ از گزینه‌هایی برای فرمت دهی و رعایت سازگاری طراحی در اختیار شما قرار می‌دهد.

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

برای راحتی کار شما در مسیر انتخاب Framework سی‌اس‌اسی، در این مقاله ۱۱ مورد از بهترین آن‌ها را با توجه به گزارش State of CSS در سال ۲۰۱۹ آورده‌ایم و به شرح مختصری از هر کدام برای پاسخ دادن به ابهامات ذهنی شما پرداخته‌ایم.

به امید این‌که در پایان این مقاله Framework مورد علاقه خود را بیابید و دلیل انتخاب خود را نیز به خوبی در ذهن داشته باشید.

۱- Bootstrap

Bootstrap محبوب‌ترین framework سی اس اس است که جایگاه اول بهترین Framework سی اس اس را بدون تردید به آن اختصاص می‌دهیم. این Framework به عنوان یک پدیده‌ی پیشرو در میان طراحان وب شناخته می‌شده است و البته که دلیل اصلی محبوبیت فراوان آن نیز، همین است. بوت‌ استرپ مخلوطی از CSS، JavaScript و HTML است.

Bootstrap 4 جدیدترین نسخه‌ی این Framework است که با کامپوننت‌های جدید، استایل شیت بهتر و قابلیت‌های واکنشگرایی بیش‌تری عرضه شده است؛ علاوه بر این‌ها بوت استرپ از LESS و SASS نیز پشتیبانی می‌کند.

اعتبار توسعه‌ی بوت‌ استرپ را می‌توان به سازندگان توئیتر اعطا کرد. در گذشته بوت استرپ به نام Twitter Blueprint شناخته می‌شده. نام بوت‌استرپ از سال ۲۰۱۱ بر روی این Framework گذاشته شده است. جدای از سیستم گرید مناسب ارائه شده توسط بوت استرپ می‌توان به برخی کامپوننت‌های قابل استفاده‌ی مجدد (reusable) آن نیز مانند navigation bars, dropdowns, pagination و لیبل‌ها اشاره کرد. پس می‌توان گفت بهترین ویژگی بوت استرپ این است که در حین استفاده از آن متوجه می‌شوید که نیاز نیست خیلی از موارد را از ابتدا طراحی کنید.

آمار استفاده از فریم‌ورک Bootstrap:

• رنک شماره‌ی یک در بهترین Framework‌ های سی اس اسی سال ۲۰۲۰ به دلیل محبوبیت فراوان در نظر سنجی State of CSS.
• ۴۵ درصد توسعه‌دهندگان CSS از آن‌ استفاده کرده‌اند و قصد استفاده‌ی مجدد از آن را دارند.
• ۱۴۵ هزار ستاره در گیت‌هاب، ۶۸.۷ هزار فورک و ۱۱۱۵ همکار (contributor)

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

• صرفه‌جویی در زمان:

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

• جلوگیری از هر گونه ناسازگاری بین مرورگرها برای ویژگی‌های تستی:

تست cross borwser برای عملکرد مناسب یک سایت بر روی مرورگرها و دستگاه‌های متفاوت بسیار حیاتی است. آخرین نسخه‌ی بوت استرپ نیز که Bootstarp 4 است، با تمامی مرورگرهای جدید سازگاری دارد و شما با استفاده از آن می‌توانید از سازگاری وب‌سایتتان با مرورگرهای مختلف، اطمینان حاصل کنید.

• نگه‌داری مناسب از پایگاه کد:

تیم نگه‌داری این Framework، باتوجه به محبوبیت رو به رشد آن، مرتبا در حال بروزرسانی بوت استرپ هستند. علاوه بر این به شکل پیوسته‌ای در حال تست این Framework بر روی تکنولوژی‌ها و مرورگرهای جدید هستند.

• ثبات و کار تیمی بهتر

از آن‌جایی که بوت استرپ و خروجی نهایی ساخته شده توسط آن بر روی تمامی مرورگرها و دیوایس‌ها یکسان نمایش داده خواهد شد، باعث حذف ناهماهنگی و ناسازگاری‌های احتمالی بین طراحانی و توسعه‌دهندگان می‌شود. اگر شخص جدیدی به تیم توسعه ملحق شود، اسناد آموزشی این Framework کار یادگیری آن را برای آن شخص آسان‌تر می‌کند. این اتفاق باعث تقویت کار تیمی می‌شود.

• منحنی یادگیری (learning curve) پایین

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

 نقاط ضعف Framework بوت استرپ چیست؟

• سرعت لود پایین:

بوت‌ استرپ با تولید فایل‌های عظیم، باعث کاهش سرعت لود سایت شما می‌شود. برای رفع این مشکل باید برخی موارد را به شکل دستی حذف کنید.

• تمام وب‌سایت‌ها شبیه به هم می‌شوند:

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

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

Twitter, Spotify, Intel, Walmart, Udemy, Mint

۲- Materialize CSS

Materialize توسط گوگل ساخته شده‌است.  Materialize CSS ترکیبی از CSS های هوشمندانه و طراحی‌های درجه یک از نظر زیبایی شناسی است. این Framework شامل ترکیبی از کامپوننت‌های HTML, CSS, JS ای است. هدف این Framework دو اصل است؛ اول واکنش‌گرایی بیشینه و دوم ناسازگاری در مرورگرها به شکل کمینه است.

اگر شما قصد ساخت یک رابط کاربری باکلاس را دارید، باید بدانید که Materialize شامل تعداد زیادی CSS سفارشی است که به هر چه منحصر به فرد تر شدن طراحی وب‌سایتتان کمک خواهد کرد. علاوه بر این، Materialize گستره‌ی‌ فراوانی از طرح‌های رنگی یا color scheme ها را در اختیار شما قرار خواهد داد تا وب‌سایت مورد علاقه‌تان را با استفاده از آن‌ها سفارشی کنید.

آمار استفاده از Framework سی اس اسی Materialize

• رنک سوم در بهترین Framework‌ های CSS در سال ۲۰۲۰ از نظر محبوبیت از نگاه نظرسنجی State of CSS
• ۱۷.۱ درصد توسعه‌دهنگان CSS از این Framework استفاده کرده‌اند و علاقه دارند که مجددا از آن بهره ببرند.
• ۱۷.۴ هزار ستاره در گیت‌هاب، ۴.۸ هزار فورک و ۲۵۰ همکار (contributor)

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

• ویژگی‌های درونی فراوان:

Materialize یکی از بهترین Framework‌ های CSS در سال ۲۰۲۰ است و گستره‌ی فراوانی از قابلیت‌های متنوع را در اختیار شما قرار خواهد داد؛ مانند پارالکس، کارد، آیتم‌های قابل هاور و ...

• صرفه‌جویی در زمان کدزنی:

از آن‌جایی که بیش‌تر قابلیت‌های حیاتی به شکل ساده‌ای قابل استفاده هستند، این Framework باعث کاهش زمان کدزنی شما خواهد شد.

• گزینه‌های پلاگینی فراوان:

Collapsible, Dialogs, Drop-downs, Media, Modals و پارالکس تنها بخشی از پلاگین‌های رایگان جاوا اسکریپتی موجود در Materialize هستند. شما می‌توانید به راحتی از این ابزارها برای بهبود رابط کاربری خود استفاده کنید.

• سهولت در کاربرد:

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

نقاط ضعف Framework سی اس اسی Marealize چیست؟

• کامپوننت‌های پیچیده‌ی جاوا اسکریپتی:

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

• پشتبیانی کم‌تر:

از آن‌جایی که Materialize به اندازه‌ی دیگر فریم‌ ورک‌های سی اس اس محبوب نیست، شما نباید انتظار پشتیبانی قوی توسط جامعه‌ی آن داشته باشید. به زبان دیگر پشتبانی از این Framework خیلی مناسب نیست.

چه کسانی از فریمورک Materialize استفاده می‌کنند؟

WPArena, Digital Services, GameRaven, DroneDeploy

۳- Bulma

Bulma یکی از بهترین Framework‌ های سی اس اس در سال ۲۰۲۰ است که بر پایه‌ی flex-box نهاده شده و متن باز (اپن سورس) نیز می‌باشد. بیش از ۲۰ هزار توسعه‌دهنده در سرتاسر دنیا از این‌ Framework استفاده می‌کنند. Bulma به توسعه‌دهندگان کمک می‌کند تا درک درستی از نحوه‌ی کد کردن کامپوننت‌های به دست آورند. حتی اگر شما به یک کامپوننت بصری نیاز داشته‌باشید، Bulma می‌تواند به کمک شما بیاید.

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

آمار استفاده از Framework سی اس اسی Bulma

• رتبه‌ی پنجم بهترین Framework سی اس س در سال ۲۰۲۰ طبق نظرسنجی State of CSS.
• ده درصد از توسعه‌دهندگان CSS از این Framework استفاده کرده‌اند و قصد استفاده‌ی مجدد از آن را دارند.
• ۳۹.۵ هزار ستاره در گیت‌هاب، ۳.۳ هزار فورک و ۳۰۳ همکار یا contributor

چرا از فریمورک Bulma استفاده کنیم؟

• طراحی آسان و خلاقانه:

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

• داکیومنت‌ کامل:

Bulma دارای اسناد کاملا شفاف است که به توسعه‌دهندگان برای ساخت هر چه آسان‌تر پروژه‌هایشان کمک می‌کند.

• همه‌کاره بودن:

بولما قابلیت‌های فراوانی در تایپوگرافی، فرم‌ها، دکمه‌ها، جدول و غیره دارد. این ویژگی‌ها باعث قدرت فراوان این Framework می‌شود.

نقاط ضعف Framework سی اس اسی Bulma چیست؟

• کند بودن بر روی اینترنت اکسپلورر:

اگر چه که این Framework سازگاری مناسبی برای مرورگرهای مختلف در اختیار شما می‌گذارد، ولی سرعت اجرای بولما بر روی IE بسیار کند است.

• جامعه‌ی کوچک:

از آن‌جایی که بولما یک Framework نسبتا جدید است، جامعه‌ی پشتیبان آن چندان بزرگ نیست و به پای بوت استرپ نمی‌رسد.

چه کسانی از فریمورک Bulma استفاده می‌کنند؟

Django, Rubrik, XICA magellan, Tam Development, Awesome Stacks, WordPress Setup

۴- PureCSS

PureCSS مجموعه‌ای از ماژول‌های CSS ای را به شما ارائه می‌دهد که می‌توانند برای استفاده در پروژه‌‌های گوناگونی مورد استفاده قرار ‌گیرند. اگر چه این ماژول‌ها کوچک اند اما واکنش‌گرا هستند. در نتیجه شما قادر به ساخت وب‌سایت‌هایی واکنش‌گرا، سریع و زیبا خواهید بود. سازنده‌ی این Framework سی اس اسی را می‌توان Yahoo دانست.

از ویژگی‌های برجسته‌ی PureCSS می‌توان به رایگان بودن کامل آن، واکنش‌گرایی درونی آن و CSS های استاندار در آن اشاره کرد.

آمار استفاده از فریمورک PureCSS

• رتبه‌ی ۷ ام بهترین Framework سی اس اسی سال ۲۰۲۰ طبق نظرسنجی State of CSS
• ۵.۴۴ درصد توسعه‌دهندگان CSS از این Framework استفاده کرده‌اند و قصد استفاده‌ی مجدد از آن را دارند.
• ۲۰.۸ هزار ستاره در گیت‌هاب، ۲.۱ هزار فورک و ۵۹ همکار

چرا از Framework سی اس اسی PureCSS استفاده کنیم؟

• سفارشی سازی آسان:

این Framework فرانت اند، پایه‌ای را برای طراحان فراهم کرده تا بتوانند با توجه به آن به سفارشی سازی منحصر به فرد طرح‌های خود بپردازند.

• سازگاری با مرورگرها:

پایه‌ی Pure CSS بر روی Normalize.css نهاده شده است. این Framework ناسازگاری‌های زیادی در مرورگرهای مختلف ندارد و از این نظر جایگاه خوبی دارد.

• قابل انعطاف:

با استفاده از این Framework نیاز به بازنویسی (overwrite) کردن قواعد (rule های) موجود سی اس اسی نیست و طراحان می‌توانند چیزهای جدید به آن اضافه کنند. در نتیجه شما قادر به سفارشی‌سازی ظاهر پروژه‌ی خود از این طریق خواهید بود.

• واکنش‌گرایی و سبکی:

۴.۵ کیلو بایت حجم فایل مینی‌فای شده و gzip شده‌ی این Framework فرانت اند است. اگر وب‌سایتی را با استفاده از PureCSS بسازید، سایتتان بر طبق دستگاه کاربرانتان، خود را redesign می‌کند. این Framework نیز گریدبندی mobile-first دارد که از ساختار ۱۲ ستونه پشتیبانی می‌کند تا  وب‌سایتتان در صفحه نمایش‌های مختلف به خوبی به نمایش در آید.

نقاط ضعف فریمورک PureCSS چیست؟

• گزینه‌ی مناسبی برای مبتدیان نیست:

این Framework گزینه‌های زیادی را برای استایل دهی منحصر به فرد ارائه نمی‌کند؛ پس شما نیاز به شخصی‌سازی زیادی خواهید داشت و این مورد چندان برای تازه‌کارها خبر خوبی نیست.

چه کسانی از Framework سی اس اسی Pure استفاده می‌کنند؟

SkyQuest Tech Stack, Hacktoolkit, PodcastParty, Wizters, Choobs Ltd.

۵- Ant Design

Ant Design یک کتاب‌خانه‌ی کامپوننتی برای Framework جاوا اسکریپتی ری اکت است. اعتبار ساخت این Framework را می‌توان به گروه علی بابا که مالک کمپانی چینی Ant Design است، اعطا کرد. سیستم گرید این Framework صفحه نمایش را به ۲۴ ستون تقسیم می‌کند که باعث کنترل بیش‌تری بر روی سفارشی‌سازی می‌شود. آیکون‌های زیادی نیز در این Framework وجود دارد که می‌توانند تمامی نیاز‌های اپ شما را رفع کنند.

آمار استفاده از فریمورک Ant Desing

رتبه‌ی نهم بهترین Framework سی اس اسی سال ۲۰۲۰ با توجه به نظرسنجی State of CSS

۴.۳۹ درصد از توسعه‌دهندگان CSS از این Framework استفاده کرده‌اند و قصد استفاده‌ی مجدد از آن را نیز دارند.

۵۹.۱ هزار ستاره در گیت‌هاب، ۲۱.۷ هزار فورک و ۱۰۸۵ همکار یا کانتریبیوتر

چرا از فریمورک Ant Design استفاده کنیم؟

• پشتیبانی از کامپوننت‌های فرم:

توسعه‌دهندگان می‌توانند از TextArea, Input, Checkbox, Radio و Date/TimePicker به عنوان آیتم‌های فرمشان استفاده کنند.

• کامپوننت‌های فوق‌العاده برای فیدبک:

این Framework نوتیفیکیشن‌های مناسبی در واکنش به اکشن‌های کاربران در اختیار شما قرار می‌دهد.

• ظاهر زیبا:

دلیل اصلی انتخاب Ant توسط توسعه دهندگان ظاهر زیبا و حس خوبی است که به کاربران می‌دهد.

• Accessibility:

کنترل بر روی صفحه کلید، انطباق با ARIA و tabbing در حالت عادی زمان‌بر و دشوار است؛ اما این فریم‌ ورک خود این موارد را مدیریت می‌کند.

• صرفه‌جویی در زمان:

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

نقاط ضعف فریمورک Ant Design

• کمبود داکیومنتیشن مناسب:

برخی از داکیومنت‌های این Framework در زبانی جز چینی موجود نیست. البته که جامعه‌ی فعال این Framework تلاش فراوانی در ترجمه‌ی داکیومنت‌های آن کرده است.

چه کسانی از Ant Design استفاده می‌کنند؟

Ant Financial, Alibaba, Tencent, Baidu, Koubei, Meituan

۶- Primer

Primer در بزرگ‌ترین جامعه‌ی توسعه‌دهندگان دنیا، Github، مورد استفاده قرار گرفته‌است. اعتبار خلق این ابزار متن بار را می توان به چند نخبه که اشتیاق فراوانی برای به اشتراک‌گذاری HTML و CSS داشته اند، داد. این Framework قصد دارد تا رویکردی سیستماتیک که ثبات در استایل‌ها مانند تایپوگرافی و رنگ‌ها را تضمین می‌کند، پیاده سازی کند.

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

آمار استفاده از فریمورک Primer

• رتبه‌ی یازدهم بهترین Framework سی اس اسی در سال ۲۰۲۰ طبق نظر سنجی State of CSS
• ۰.۶۲ درصد از توسعه‌دهندگان CSS از این Framework استفاده کرده‌اند و قصد استفاده ی مجدد از آن را نیز دارند.
• ۹۲.۵ هزار ستاره در گیت‌هاب،‌ ۱۵.۹ هزار فورک و ۷۷ همکار

چرا از فریمورک Prime استفاده کنیم؟

• تایپوگرافی قابل سفارشی‌سازی:

این Framework فونت سایزها و font weight های متنوعی را در اختیار شما قرار می‌دهد. تا با استفاده از آن‌ها به خوانایی هر چه بیش‌تر وب سایتتان بپردازید.

• طرح‌های رنگی خوب:

پرایمر با طرح‌های رنگی مناسب خود به وضوح محتوای شما کمک خواهد کرد. Utility های رنگی و متغیرها نیز گزینه‌های زیادی را در اختیار توسعه‌دهندگان برای استایل دهی می‌گذارند تا محدود به یک چارچوب تکراری نباشند.

• مقیاس فاصله‌بندی ترکیبی:

مقایس فاصله‌بندی بر پایه‌ی ۸ این Framework که قابلیت ترکیبی مناسبی نیز دارد، با توجه به چگالی محتوای گیت‌هاب بسیار مناسب است.

نقاط ضعف فریمورک Prime

• کمبود محبوبیت و نقد:

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

• پشتیبانی نامناسب از طرف جامعه‌ی آن:

از آن‌جایی که افراد کمی از این Framework استفاده می‌کنند، جامعه‌ی آن نیز بسیار کوچک مانده است و پشتیبانی مناسبی نخواهید داشت.

چه کسانی از Primer استفاده می‌کنند؟

My Stack, timelog, g59 Ranking, Complete Toolset

جمع‌بندی

اگر بگوییم که CSS زبانی است که تا سال‌های سال در طراحی وب استفاده خواهد شد، حرف بی‌جایی نزده‌ایم. هر یک از Framework‌های بیان شده در این مقاله مزایا و معایب مختص به خود را دارند. پس محیط بیزینس شما می‌توان تاثیر زیادی در انتخاب شما از بین این لیست بلند باشد. شما می‌توانید با توجه به نیازمندی‌های هر کدام از پروژه‌هایتان، یکی از این Framework‌ ها را برای استفاده در آن استفاده کنید. البته باید همیشه مراقب ناسازگاری ویژگی‌های آزمایشی جدید CSS و HTML بر روی مرورگرهای مختلف باشید و همیشه پروژه‌هایتان را در مرورگرهای مختلف و دستگاه‌های متفاوت تست کنید تا علاوه بر موارد آزمایشی، واکنش‌گرایی وب‌سایتتان را نیز امتحان کرده باشید.

آیا به نظر شما این رتبه‌بندی برای بهترین Framework‌ های CSS در سال ۲۰۲۰ میلادی درست بوده است؟

اگر فکر می‌کنید که Framework دیگری نیز باید در این لیست قرار بگیرد یا رتبه‌ی بهتری داشته باشد، در بخش نظرات بیان کنید و به ما در یافتن بهترین Framework سی اس اسی حال حاضر کمک کنید.

منبع