قوانین نگهداری کلاس‌ها

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

هدف و مفهوم اصلی

Design System مجموعه‌ای از Token، Component و قانون استفاده است. نگهداری کلاس‌ها با ترتیب ثابت، Variantهای محدود و حذف تکرار ساختاری بهتر می‌شود؛ کوتاه‌کردن افراطی رشته‌ها هدف اصلی نیست.

روش پیاده‌سازی

1. Tokenهای رنگ، فاصله، Radius و Shadow را تعریف کنید.
2. Base Style و Variantهای Component را جدا نگه دارید.
3. قوانین نام‌گذاری و بازبینی Responsive و Accessibility را مستند کنید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

const buttonBase =
  "inline-flex items-center justify-center rounded-xl px-4 py-2 font-medium transition focus-visible:outline-none";

const buttonPrimary =
  `${buttonBase} bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-4 focus-visible:ring-blue-500/20`;

خروجی مورد انتظار

کلاس‌های پایه و Variant به‌صورت قابل نگهداری.

نکات مهم و خطاهای رایج

• Tokenهای هم‌معنا با نام‌های مختلف باعث واگرایی می‌شوند.
• انتزاع زودهنگام Component انعطاف طراحی را کم می‌کند.

تمرین پیشنهادی

دو Component پروژه را با Token مشترک و Variantهای محدود بازنویسی کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS