هنگام ساخت یک برنامه وب جدید، تصمیماتی باید بگیریم. آیا توسط سرور رندر شده و به کلاینت ارسال می‌شود، یا یک SPA با ویژگی‌های قدرتمند است؟ از کدام فریم‌ورک باید استفاده شود (در صورت وجود)؟ React؟ Angular؟ Vue؟ Ember؟

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

فریم ورک‌های CSS

فریم‌ورک‌های CSS (مانند Bootstrap یا Tailwind) مجموعه‌ای از نام‌های کلاس CSS از پیش تعریف شده را ارائه می‌دهد که می‌توانید بدون تنظیمات خاصی برای استایل رایج اجزا استفاده کنید، مانند طرح عناصر موجود در صفحه، شکل ظاهری ورودی‌ها و دکمه‌ها، و رفتار پنجره‌های modal. برای سایت‌های استاتیک یا برنامه‌های وب رندر شده توسط سرور، فریم‌ورک‌های CSS قابلیت‌های از پیش ساخته شده زیادی ارائه می‌دهند.

متاسفانه، وقتی برنامه‌های وب در حال استفاده از فریم‌ورک CSS هستند، اغلب کاملا واضح است. برای داشبورد ادمین یا یک ابزار داخلی، این امر ممکن است مساله‌ای نباشد. اما اگر برنامه‌ای می‌سازید که با مشتری سر و کار دارد، احتمالا می‌خواهید بیشتر با برند خاص شرکت شناخته شود. به خاطر داشته باشید که از نزدیک با طراح تیم خود همکاری داشته باشید تا مطمئن شوید که استفاده از فریم‌ورک با برند شرکت شما هم‌سو است.

کتابخانه‌های کامپوننت

اگر از فریم‌ورک جاواسکریپت مبتنی بر کامپوننت مثل React استفاده می‌کنید، ممکن است به جای فریم‌ورک CSS از کتابخانه کامپوننت استفاده کنید. هر برنامه React برای شروع به مجموعه‌ پایه‌ای از کامپوننت‌ها نیاز دارد؛ سپس این موارد به روش‌های مختلف ترکیب می‌شوند تا کامپوننت‌های بسیار قدرتمندی را ایجاد کنند. شما می‌توانید کامپوننت‌های پایه خود را بسازید. اما چرا باید این کار را انجام دهید وقتی کتابخانه کامپوننت‌هایی وجود دارد که این کار را برای شما انجام می‌دهد؟ Material UI و Ant Design در حال حاضر محبوب‌ترین کتابخانه‌های موجود هستند.

هنگام ایجاد یک نگاه و احساس منحصربه‌فرد، کتابخانه‌های کامپوننت از همان مشکلات فریم‌ورک CSS رنج می‌برند. آن‌ها سعی می‌کنند با ارائه روشی برای شخصی‌سازی "تم" برنامه این مساله را مدیریت کنند. هر چیزی از پالت‌های رنگ و اندازه فونت‌ها گرفته تا حاشیه دکمه‌ها معمولا به عنوان متغیر تم که می‌توان پیکربندی کرد در دسترس هستند. مثلا Ant Design بسیاری از متغیرهای LESS را برای پیکربندی نشان می‌دهد.

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

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