نکات مثبت و منفی چهارچوب TailwindCSS

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

فلسفه کاری این فریمورک نیز با تمام فریمورک‌های سی‌اس‌اس متفاوت است. دلیل این موضوع نیز ساده است. در هر فریمورک CSSیی شما شاهد این قضیه هستید که باید یکسری کلاس و ID را در HTML ایجاد کرده و سپس در یک فایل جداگانه با استفاده از فریمورکی مانند بوت استرپ به آن کلاس‌ها استایل بدهید. TailwindCSS حالت متفاوتی را انتخاب کرده است. در TailwindCSS ما برای هر المان از مجموعه‌ای کلاس استفاده می‌کنیم. این کلاس‌ها تنها روی یک المان خاص اعمال می‌شود. به این حالت در TailwindCSS اصطلاحا Single-Purpose Classes گفته می‌شود.

بنابراین بجای اینکه به شکل زیر به کدهای‌تان استایل بدهید:

<div class="card-body">
  <h1 class="card-title pricing-card-title">$29 <span class="text-muted">/ mo</span></h1>
  <ul class="list-unstyled">
    <li>30 users</li>
    <li>15 GB</li>
  </ul>
  <button type="button" class="btn btn-primary">Buy</button>
</div>

اینکار را انجام می‌دهید:

<div class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0 xl:grid-cols-4 border border-gray-500">
  <h1 class="text-lg leading-6 font-medium text-gray-900">$20 <span class="text-sm">/ mo</span></h1>
  <ul class="mt-6 space-y-4">
    <li class="flex space-x-3 text-sm text-gray-500">30 users</li>
    <li class="flex space-x-3 text-sm text-gray-500">15 GB</li>
  </ul>
  <button type="button" class="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">
  Buy</button>
</div>

اگر تا به حال با TailwindCSS روبرو نشده‌اید ممکن است بگویید: یا خدا! چرا باید از چنین فریمورکی استفاده کنم، اینکه فقط همه چیز را پیچیده‌تر می‌کند! درست است در اولین نظر شما ممکن است با نتیجه‌گیری‌هایی شبیه به زیر روبرو شوید:

• کدها به صورت عجیب و غریبی پیچیده هستند.
• نام بعضی از کلاس‌ها واقعا طولانی است.
• تکرار پذیری در این حالت تقریبا غیر ممکن است.
• شاید بهتر باشد از همان خاصیت style برای هر تگ استفاده کنم، چون دقیقا TailwindCSS همین کار را می‌کند!

فارغ از اینکه در نگاه اول شاید این مشکلات به ذهن‌تان خطور بکند، اما TailwindCSS با داشتن مشکلات خاص خود، نکات مثبت بسیار زیادی نیز دارد. به شما نیز همین اول کار این اطمینان را می‌دهم که TailwindCSS یک فریمورک بسیار کاربردی است!

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

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

۱- دیگر نیازی به نگرانی در ارتباط با نامگذاری کلاس‌ها ندارید

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

در واقع شاید برای بیشتر شما که مشغول مطالعه این مقاله هستید موضوع نامگذاری چندان چالش برانگیز به نظر نرسد، اما زمانی که مشغول نوشتن یک پروژه هستید و می‌دانید که باید تمام اصول اولیه نامگذاری را رعایت کنید، در چنین حالتی می‌توانید تصور کنید که TailwindCSS چقدر می‌توانست به شما کمک بکند.

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

۲- فایل کمتر، فرایند توسعه سریع‌تر!

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

زمانی که با TailwindCSS کار کنید تا حد بسیار زیادی این مشکل‌تان حل خواهد شد. دلیل آن نیز ساده است. از آنجایی که شما بیشتر استایل‌های‌تان را مستقیما در فایل HTML اعمال می‌کنید دیگر نیازی به انجام فرایند سوئیچینگ در بین فایل‌های مختلف نخواهید داشت. به همین دلیل TailwindCSS باعث می‌شود انجام کارها سرعت بیشتری گرفته و بتوان در زمان کمتری استایل‌های مورد نظر را اعمال کرد.

۳- استفاده از variant‌ها بجای کار با Media Query، pseudo-class و Child-Selectorها

شما نمی‌توانید با استفاده از حالت inline-css مدیا کوئری‌های‌تان را پیاده‌سازی کنید. دلیل این موضوع نیز ساده است. هر زمان که شما شروع به پیاده‌سازی مدیا کوئری بکنید نیاز به کار با سلکتورهای مختلف دارید و در نتیجه همه چیز آشفته و درهم برهم خواهد شد.

خوشبختانه در TailwindCSS برای این موضوعات راهکارهای بسیار آسانی در نظر گرفته شده است. شما در این حالت بجای آنکه سلکتورهای مختلف را تعیین کنید، می‌توانید از سایزها و Variantهای مختلفی که TailwindCSS برای شما در نظر گرفته استفاده کنید. البته جدای از مدیا کوئری، برای استفاده از شبه-کلاس‌ها و انتخاب گر‌های فرزند نیز در این چهارچوب دوست داشتنی راهکارهایی در نظر گرفته شده است. به لیست زیر نگاه کنید تا با برخی از این موارد آشنا شوید:

• Size classes (sm, md, lg, xl)
• hover
• focus
• active
• dark mode (through either parent class or media query)
• first, last, odd, even
• form states like required, invalid, disabled
• group and peer to modify things in child or adjacent elements
• before and after to modify pseudo-elements
• placeholder (for form elements that aren’t filled in)
• markers to style bullets in lists

در مستندات رسمی TailwindCSS شما می‌توانید ده‌ها مورد شبیه به این موارد را پیدا کنید.

۴- طراحی یکپارچه

زمانی که فرایند توسعه رابط کاربری شما بین تیم‌های مختلفی تقسیم می‌شود همواره پیاده‌سازی یک رابط کاربری با رعایت اصول یکپارچگی کاری سخت و زمان بر است. بعضی اوقات تیم‌ها از خودشان می‌پرسند که فاصله بین المان‌ها باید ۱۸ پیکسل باشد یا ۱۹؟! اندازه فونت چه؟ و... . در چنین شرایطی است که رعایت تمام نکات واقعا کار مشکلی شده و تقریبا غیر ممکن است که همه از یک عدد ثابت استفاده بکنند.

TailwindCSS به شکلی طراحی شده که نهایت یکپارچگی را روی رابط کاربری شما اعمال بکند. برای اثبات این موضوع نیز ما می‌توانیم از چند مثال ساده استفاده بکنیم.

• در TailwindCSS شما یک پالت رنگی در اختیار دارید که اندازه آن‌ها با در نظر گرفتن سایه‌ها و دیگر المان‌ها به صورت دقیق تنظیم شده است.
• میزان فضاهای خالی در TailwindCSS با دوره‌های تناوبی دقیق تنظیم شده است. بنابراین شما مقدار ۱۹ پیکسل نخواهید داشت. بلکه این مقادیر عبارت است از ۱۲، ۱۴، ۱۶، ۱۸ و... . از این جهت احتمال آنکه در ارتباط با فضا دهی به المان‌ها دچار ناسازگاری شوید بسیار بعید است.
• اندازه، وزن، نوع فونت‌ها در TailwindCSS به صورت دقیق تعیین شده و نامگذاری آن‌ها نیز واضح است.
• اندازه Breakpointها در TailwindCSS از پیش تعیین شده و در نتیجه در زمانی که می‌خواهید یک طراحی واکنشگرا داشته باشید نیازی به تعریف اندازه Breakpointها ندارید.

۵- فایل CSS سفارشی با کنترل پذیری بالا

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

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

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

۶- دیگر نیازی به !important ندارید

در ساختار فایل‌های CSS زمانی که شما یک استایل را به کلاس‌های تودرتو بدهید، در یک نقطه همه چیز غیر قابل کنترل به نظر رسیده و تقریبا نمی‌توانید تشخیص بدهید که کدام استایل برای کدام المان است. به همین دلیل نیاز دارید برای اعمال زور و کنترل هر چه بیشتر المان‌ها از دستور !important استفاده کنید. این دستور یک استایل را در اولویت قرار داده و آن را با زور اعمال می‌کند. اما استفاده زیاد از این دستور در نهایت خروجی مناسبی نداشته و باز هم به مشکلات اولیه خود باز خواهید گشت.

زمانی که از TailwindCSS استفاده کنید این اتفاق هرگز نخواهد افتاد. دلیل این موضوع نیز واضح است چرا که شما استایل‌ها را به صورت مستقیم روی المان‌ها اعمال کرده و می‌توانید به صورت مستقیما متوجه اینکه چه المانی چه استایلی را دریافت می‌کند بشوید.

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

البته همانطور که می‌دانید هیچ ابزاری کامل نبوده و همواره مشکلاتی نیز وجود دارد. به همین دلیل در ادامه مطلب نگاهی به چند مشکل اساسی از TailwindCSS خواهیم انداخت.

۱- build کردن

اگرچه کار کردن در ابتدا با TailwindCSS بسیار آسان است، اما با نسخه‌های جدیدی که TailwindCSS منتشر می‌کند شما نیاز دارید که فرایند Build کردن TailwindCSS را پیش بگیرید. البته برای بیشتر توسعه دهندگان Front-End انجام چنین کاری تنها با چند دستور ساده امکان پذیر است. اما برای مبتدیان این کار ممکن است کمی پیچیده به نظر برسد. جدای از آن، پروسه Build‌ کردن ممکن است کمی از وقت شما را بگیرد.

۲- فرایند یادگیری

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

۳- حجم HTML بالا!

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

۴- چند نکته مهم دیگر و تمام!

نه فقط TailwindCSS، هیچوقت اجازه ندهید هیچ فریمورکی شما را از یادگیری CSS دور کند. هر چقدر هم به یک فریمورک متکی باشید باز هم نیاز خواهید داشت که به خوبی CSS را یاد بگیرید.

TailwindCSS مانند هر فریمورک دیگری نمی‌تواند هر کاری را انجام بدهد و به همین دلیل نباید انتظار انجام همه کارها را داشته باشید.

در پایان

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