فریم ورک CSS یا CSS Grid کدامیک را انتخاب کنیم؟

آیا تا به حال این سوال برایتان پیش آماده که آیا می توان CSS Grid را جایگزین CSS framework یا کتابخانه های شخص ثالث کنیم؟ برای پاسخ به این سوال مقایسه مزایا و معایب مختلفی در این مورد وجود دارد.

سوال متداول دیگری که در این باره بسیار پرسیده می شود این است که: آیا باید از CSS Grid یا Bootstrap استفاده کنم؟

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

در این مقاله وقتی درباره یک فریم ورک صحبت می کنم، منظور یک فریم ورک CSS شخص ثالث مانند بوت استرپ Bootstrap یا فاندیشن Foundation است. شما ممکن است استدلال کنید که این کتابخانه های کامپوننت هستند، اما بسیاری از افراد (از جمله مستندات خودشان) آنها را به عنوان یک فریم ورک توصیف می کنند، بنابراین این اصطلاحی است که ما از اینجا استفاده خواهیم کرد. مهم ترین نکته این است که اینها چیزهایی هستند که برای شما ساخته شده اند، بدون اشاره به مسائل خاص پروژه شما. جایگزین استفاده نکردن از یک فریم ورک شخص ثالث این است که CSS خودتان را بنویسید، که ممکن است شامل ایجاد فریم ورک داخلی، استفاده از یک دسته از فایل های رایج به عنوان نقطه شروع، یا ایجاد هر پروژه به عنوان یک چیز جدید باشد.

چرا فریم ورک CSS را انتخاب می کنیم؟

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

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

فریم ورک به شما مستندات آماده ارائه می دهد

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

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

دسترسی آسان به کمک از طریق انجمن های آنلاین

هنگامی که شما تصمیم می گیرید که از یک ابزار خاص استفاده کنید، شما به یک انجمن از کاربران برای درخواست کمک دسترسی پیدا می کنید. به جز اینکه شما یک مسئله بسیار روشن در CSS دارید و می توانید این مورد را به روشنی توضیح دهید، در مابقی موارد درخواست کمک برای CSS ممکن است بسیار دشوار باشد. به خصوص اگر شما بخواهید درباره چگونگی رویکرد ساخت یک کامپوننت خاص سوال کنید. استفاده از یک فریم ورک به شما نقطه شروعی برای پرسیدن سوال می دهد. به طور كلي، شما درباره اصلاح يا تغییر دادن یک کامپوننت خاص سوال می پرسید نه این که همه چیز را از نقطه صفر آغاز نمایید. خوب اینطور این چیز ساده ای است که می توانید بپرسید، و همچنین یک چیز ساده تر برای پاسخ دادن.

سیستم GRID

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

سرعت تحویل پروژه

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

در مورد توسعه MVP برای یک ایده جدید، یک فریم ورک ممکن است یک انتخاب عالی باشد. شما چیزهای زیادی دارید که باید برای آن ها وقت بگذارید و همین نیاز دارید فرضیه های مختلف را آزمایش کنید. با استفاده از یک فریم ورک شما می توانید خیلی سریع محصول را به کاربران ارائه دهید و صرف زمان برای قسمت هایی که احتمالا در آینده از آن ها استفاده نخواهید کرد نیز صرفه جویی کنید.

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

من طراح نیستم

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

حل عدم تطابق مرورگر ها در CSS

همه مرورگرها به طور یکسان کار نمی کنند (به علت عدم پشتیبانی برخی عملکردها یا باگ). برای همین است که باید در زمان توسعه مسائل مربوط به عدم هماهنگی را حل کرد. خوشبختانه فریم ورک ها بیشتر این مسائل را مدیریت می کنند.

از سوی دیگر برای طراحی Responsive یا واکنش گرا فریم ورک ها کار را بسیار ساده می کنند تا اینکه شما بخواهید تماما آن را پیاده سازی کنید.

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

در میان فواید و راحتی کار بار فریم ورک ها، دلایلی وجود دارد که گاهی طراحان ترجیح می دهند که از یک فریم ورک استفاده نکنند.

دشواری در Overriding کد های فریم ورک

بسیاری از افراد در این مورد اظهار داشتند که ممکن است دشوار باشد که کد مورد استفاده در فریم ورک را نادیده بگیرند یا Override کنند. فریم ورک انتخاب خوبی بود اگر در کار آنها نیاز زیادی به Overriding وجود نداشت. چون با ویرایش و تنظیم یا دستکاری زیاد فریم ورک، مزایای سهولت استفاده اعضای تیم از فریم ورک به واسطه درک چگونگی استفاده از آن را می توان از دست داد.

تمام وب سایت ها شبیه هم می شوند

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

دشواری Override در استایل های فریم ورک که قبلا ذکر شده است علت اصلی این است که چرا سایت های توسعه یافته با استفاده از یک فریم ورک خاص شبیه به نظر می رسند. بنابراین فقط مسئله خلاقیت نیست.

حل مشکلات CSS در سراسر دنیا

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

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

یاد گیری فریم ورک بجای CSS

توسعه دهندگان زیادی دیده می شوند که کار خود را با فریم ورک ها آغاز کرده و ادامه داده اند. با پیچیدگی های وب سایت های امروزی این مسئله تا حدی قابل درک است و اشکال ندارد. اما مسئله زمانی آغاز می شود که پروژه نیازمندی های خاصی دارد، یا باید فریم ورک یا ابزار جدیدی را به کار گرفت. بدون دانش مناسب از CSS این کار دشوار یا تا حدی کور کورانه صورت خواهد گرفت.

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

بدون فریم ورک CSS چطور وب سایت طراحی کنیم؟

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

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

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

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

کتابخانه الگوی مستند یا راهنمای استایل تهیه کنید

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

دستورالعمل های کد CSS خودتان را توسعه دهید

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

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

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

به یاد داشته باشید که پاسخ در طول زمان تغییر می کند. شاید بد نباشد که تنها نگاه و توجه خود را به این نکته که امروز چه می خواهید محدود نکنید. بلکه تا حدی افق دید خود را تغییر داده به آینده توجه داشته باشید. آیا فکر می کنید انتخاب شما در 5 سال دیگر هنوز بقا خواهد داشت؟ آیا انتخاب شما در آینده نیز مثبت به نظر می رسد؟

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