𝗧𝗮𝗶𝗹𝘄𝗮𝗶𝗻𝗱 𝗖𝗦𝗦𝟰: چرا استایلهای کاربردی مقیاسپذیری بهتری دارند؟
بسیاری از توسعهدهندگان از دیدن کلاسهای کاربردی (utility classes) در HTML متنفرند. این کار ظاهر نامنظمی دارد. شبیه همان استایلهای درونخطی (inline styles) قدیمی است که یاد گرفتهاید از آنها دوری کنید. شاید فکر کنید داریم به عقب باز میگردیم.
اما CSS سنتی مشکل متفاوتی ایجاد میکند.
یک فایل استایل با ۵۰۰۰ خط را تصور کنید. توسعهدهنده A دو سال پیش کلاسی را نوشته است. توسعهدهنده B میخواهد یک تغییر کوچک ایجاد کند. توسعهدهنده B میترسد به کلاس اصلی دست بزند؛ چون نمیداند آیا این تغییر روی صفحهای پنهان تأثیر میگذارد یا خیر. بنابراین، به جای آن یک کلاس جدید میسازد.
این موضوع باعث دو مشکل اصلی میشود:
- حجم باندل CSS شما با هر بار اضافه کردن یک ویژگی جدید، افزایش مییابد.
- ساعتها وقت صرف نامگذاری چیزهایی مثل
.card-body-flex-innerمیکنید.
Tailwind CSS این رویکرد را تغییر میدهد. این ابزار از کلاسهای کاربردی مانند bg-mint-500 یا p-4 استفاده میکند. این روش دو مزیت اصلی دارد:
۱. حجم باندل کمتر شما از کلاسهای یکسان در سراسر اپلیکیشن خود استفاده مجدد میکنید. فایل CSS شما به صورت خطی با بزرگ شدن پروژه رشد نمیکند. چه ده صفحه داشته باشید و چه ده هزار صفحه، حجم CSS شما کم باقی میماند.
۲. بازنویسی (Refactoring) ایمنتر تمام استایلهای یک المان درون همان کامپوننت قرار دارند. اگر کامپوننت را حذف کنید، استایلها هم همراه آن حذف میشوند. با این کار، به اشتباه سایدبار (sidebar) در صفحه دیگری را خراب نخواهید کرد.
شاید در مورد خوانایی (readability) سوال کنید.
در توسعه وب مدرن، شما از کامپوننتهایی مانند React یا Vue استفاده میکنید. شما تمام روز با HTML نامنظم سر و کار ندارید. شما یک بار استایل کامپوننت را تعریف میکنید و سپس در چیدمان اصلی خود، از یک تگ تمیز مانند <Card /> استفاده میکنید.
جزئیات نامنظم درون فایل کامپوننت باقی میمانند. معماری اصلی شما تمیز و قابل پیشبینی میماند.
ما مارکآپ (markup) زیبا را با قابلیت نگهداری بهتر معامله کردیم. ما کدهای نامنظم را در طول توسعه میپذیریم تا از پایداری سیستم در مرحله تولید (production) اطمینان حاصل کنیم.
شما چگونه CSS خود را مدیریت میکنید؟ آیا کلاسهای کاربردی را دوست دارید؟