مزایا و معایب Tailwindcss

در دنیای توسعه وب فرانت اند (سمت کاربر), Tailwindcss به چارچوبی از CSS تبدیل شده است که اخیراً بیش از هر چیز دیگری در حال مطرح شده است. با وجود این، مخالفان خودش را هم دارد

اساس Tailwind این است که به جای ایجاد مجموعه ای از انتخابگرها و کلاس های سفارشی برای استایل کد خود (همانطور که برای 20 سال متداول بوده است)، از مجموعه بزرگی از کلاس های کاربردی تک منظوره استفاده کنید که هر کدام یک کار بخصوص را انجام می دهد. در اصل، تقریباً تمام استایل های خود را مستقیماً به کدهای سمت کاربر HTML، React یا Vue اضافه می‌کنید. بنابراین به جای چیزی شبیه به این:

<div class="card-body">
  <h1 class="card-title pricing-card-title">$20<span class="text-muted">کالا</span></h1>
  <ul class="list-unstyled">
    <li>30 کاربر</li>
    <li>15 GB</li>
  </ul>
  <button type="button" class="btn btn-primary">خرید</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">کالا</span></h1>
  <ul class="mt-6 space-y-4">
    <li class="flex space-x-3 text-sm text-gray-500">30 کاربر</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">
  خرید</button>
</div>

اگر تا کنون با Tailwind کار نکرده اید, احتمالا اولین واکنش شما چیزی شبیه این خواهد بود : “وای , عجب کلس لیست های باحالی! چگونه این روش بهتری برای استایل دادن به کد های من خواهد بود”

• به نظر عجیب میاد
• بعضی از اسم ها خیلی طولانی هستند
• خیلی تکرار وجود دارد(تصور کنید چندین بلاک از اینها در صفحه وجود داشته باشد)
• در بسیاری موارد , شبیه آن است که از تگ های استایل با استایل های خطی در المنت ها استفاده شده است

با وجود این اشکالات ظاهری، مزایای زیادی استفاده از Tailwind به شما ارائه میدهد . و من به شما اطمینان می‌دهم، Tailwind راه‌های بسیار بیشتری در مقایسه با اضافه کردن استایل ها خطی ارائه می‌دهد.

اینها مزایای اصلی استفاده از TailwindCSS هستند.

1. دیگر نیازی به فکر کردن برای نام کلاس های استایل نیست

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

• آیا من از این بیش از یک بار استفاده خواهم کرد؟
• اگر دوباره از این استفاده کنم، آیا باید به نوعی متفاوت باشد؟
• از چه قراردادهایی برای نامگذاری استفاده کنم؟
• آیا باید این را بر اساس ظاهر، عملکرد یا چیز دیگری نامگذاری کنم؟
• از چه قراردادهایی برای نامگذاری و سازماندهی CSS خود استفاده کنم؟

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

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

2. تغییر مفادها بین فایل های CSS/ بلاکهای استایل و کد HTML بسیار کمتر است

معمولاً وقتی ساختار اصلی صفحه وب خود را می نویسید، HTML و JS می نویسید و اغلب به چیزهایی مانند:

• "فقط باید کمی حاشیه به این اضافه کنم."
• "این متن باید بزرگتر باشد."
• "من باید یک کلاس برای این نوع عنصر جدید ایجاد کنم."

هر بار که این کار را انجام می‌دهید، احتمالاً باید با CSS خود در تب دیگری از IDE خود بروید یا تا ابتدای فایل خود بروید، جایی که یک بلوک <style> دارید.

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

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

3.می توانید از وارانت ها با کوری مدیا, شبه کلاس ها و انتخاب گرهای بچه (زیرمجموعه) استفاده کنید

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

خوشبختانه Tailwind به شما این امکان را می دهد که همه این نوع استایل ها را بدون نیاز به ایجاد انتخابگرهای مختلف برای هر نوعی انجام دهید. در اینجا فقط چند مورد است:

• کلاس های اندازه (sm، md، lg، xl)
• شناور
• تمرکز
• فعال
• حالت تاریک (از طریق کلاس والد یا درخواست رسانه)
• اول، آخر، فرد، زوج
• حالت هایی مانند الزامی، نامعتبر، غیرفعال را تشکیل دهید
• گروه و همتا برای اصلاح چیزها در عناصر کودک یا مجاور
• قبل و بعد برای اصلاح شبه عناصر
• مکان نگهدار (برای عناصر فرم که پر نشده اند)
• نشانگرهایی برای استایل کردن گلوله ها در لیست ها

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

4. Tailwind به اجرای یک سیستم طراحی منسجم کمک می کند (بدون اینکه خیلی محدود کننده باشد)

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

Tailwind واقعاً به این امر کمک می کند زیرا می توانید Tailwind را طوری تنظیم کنید که فقط مقادیر خاصی را مجاز کند، به جای اینکه همه چیز را روی محدوده نامحدودی از مقادیر ممکن تنظیم کنید.

• یک پالت رنگ با طبقه های معقول بین سایه ها تعریف می شود.
• مقادیر فاصله فقط در فواصل زمانی مشخص مجاز است، بنابراین فاصله یکسان به نظر می رسد. شما باید بین 12، 14، 16، 20 و غیره، و نه هر مقدار ممکن انتخاب کنید، بنابراین احتمال کمتری وجود دارد که با فاصله کمی متفاوت بین عناصر بسیار مشابه مواجه شوید.
• مجموعه‌ای از فونت‌ها، وزن‌ها و اندازه‌های فونت برای استفاده وجود دارد.
• نقاط شکست عرض برای طراحی پاسخگو شما از پیش تعریف شده است، بنابراین نقاط شکست زیادی ندارید. (به راحتی می توانید موارد بیشتری را اضافه کنید).

البته، می‌توانید و احتمالاً هر یک از این مقادیر را در صورت نیاز سفارشی کنید، اما نکته اینجاست که لازم نیست فکر کنید "هوم، آیا من در اینجا به 18 یا 19 پیکسل فاصله نیاز دارم؟" یا "آیا این رنگ باید #1122FF یا #1128F0 باشد؟" شما یک لیست تعریف شده از مقادیر برای انتخاب دارید، و این باعث می شود که ظاهر ساده تر و یکدست تر باشد.

5. CSS تولیدی شما فقط دارای استایل هایی است که شما واقعاً استفاده می کنید

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

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

6. کلاس های کاربردی به خوبی کش می شوند

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

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

7. ایجاد تغییرات در استایل بدون تغییر اساسی چیزها آسان است

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

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

form.master input {
  padding: 8px;
}

/* Later on in the stylesheet… */


/* This style will not be applied in a form with class “master” because the above has higher specificity */
form input {
  padding: 4px;
}

8. استخراج به کامپوننت ها به حفظ کد DRY کمک می کند

در مورد ماهیت تکراری Tailwind چطور؟ برای مثال، اگر مجموعه ای از آیتم های فهرست استایل دار دارید، به طور جدی باید هر بار لیست بزرگی از کلاس ها را اعمال کنید؟

بله و خیر. اگر یک سند بزرگ را کاملاً با دست کدنویسی می‌کردید، مطمئناً می‌تواند خسته‌کننده باشد، اگرچه در این موارد، IDE‌ های مدرن به شما اجازه می‌دهند همه آنها را به‌طور همزمان انتخاب و ویرایش کنید. (ویرایش چند مکان یک وحی مطلق از سوی خداست!) اما در اکثر وب سایت های کاربردی، قسمت های بسیار تکراری یک سند معمولاً به هر حال به صورت برنامه نویسی از طریق یک حلقه تولید می شوند. بنابراین شما واقعاً باید فقط یک بار چنین کدی را بنویسید.

در مواردی که ممکن است نیاز به استفاده مجدد از یک بلوک کد داشته باشید، استخراج آن از اجزای قابل استفاده مجدد در چارچوب خود (مانند React، Vue یا حتی Blade) منطقی تر است. به این ترتیب شما همچنین می توانید HTML ساختاری مربوطه را با تمام سبک های آن ترکیب کنید و یک منبع حقیقت برای این بیت کد که ممکن است در بسیاری از صفحات ظاهر شود, داشته باشید.

در نهایت، اگر استخراج به کامپوننت‌ها در موقعیت شما منطقی نیست، می‌توانید از قابلیت @apply در Tailwindاستفاده کنید، که به شما امکان می‌دهد چندین کلاس Tailwind را در یک کلاس منفرد و سفارشی ترکیب کنید و مزایای Tailwind را با رویکرد سنتی CSS ترکیب کنید. . این می تواند برای مواردی مانند دکمه ها یا المنت فرم که اغلب استفاده می شوند، اما ممکن است پیچیدگی لازم برای استخراج به یک جزء خاص را نداشته باشند، بسیار مفید باشد.

9. حفظ یک ظاهر طراحی شده با Tailwind بسیار ساده تر است!

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

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

معایب Tailwind

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

1. یک مرحله ساخت مورد نیاز است

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

2. راه اندازی و منحنی یادگیری

اگر قبلاً CSS را می‌دانید، Tailwind چیز دیگری است که باید یاد بگیرید. شما باید آن را نصب کنید، نحوه پیکربندی آن را به روشی که می‌خواهید بیابید (اگر نمی‌توانید پیش‌فرض‌ها را بپذیرید)، و سپس قراردادها و نام‌های کلاس‌ها و نحوه عملکرد بخش‌های مختلف Tailwind را یاد بگیرید.

خوشبختانه، Tailwind مستندات بسیار خوبی دارد که یافتن آنچه را که نیاز دارید را بسیار آسان می کند، و تعداد زیادی آموزش و مثال های خوب در دسترس است. یک دو روز مطالعه و تمرین معمولاً تنها چیزی است که برای داشتن مهارت کافی لازم است.

3. اندازه های HTML بزرگتر

از آنجایی که رویکرد الویت کاربردی بود اغلب شامل اضافه کردن کلاس های زیادی به HTML شما می شود، اندازه دانلود HTML ممکن است افزایش یابد. مزیت این کار این است که این نوع داده های اضافی و تکراری به راحتی فشرده می شوند، بنابراین تفاوت در تجربه کاربر ممکن است قابل توجه نباشد. سارا دایان از الگولیا در سخنرانی خود "در دفاع از الویت کاربردی بودن CSS" به این نگرانی پرداخت. در آن، او تفاوت بین رویکرد الویت کاربردی بودن و رویکرد جزء با یک صفحه موجود را نشان داد و متوجه شد که اندازه فشرده نشده با الویت کاربردی بودن حدود 20٪ بزرگتر است. اما پس از فشرده سازی، تفاوت تنها چند درصد بود.

علاوه بر این، سند CSS با رویکرد کامپوننتی بزرگتر بود و در نهایت باعث سند پیچیده تری بود که برای عبور و اعمال مرورگر به پردازش بیشتری نیاز دارد.

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

4. Tailwind نمی تواند همه کارها را انجام دهد

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

5. می تواند شما را از یادگیری صحیح CSS باز دارد

اگر با CSS خیلی تازه کار هستید، استفاده از Tailwind را توصیه نمی کنم، زیرا ابتدا باید نحوه کار CSS را یاد بگیرید. باید بفهمید:

• اکثر انتخابگرها (id، کلاس، عنصر، فاصله، عنصر مجاور و غیره)
• اولویت CSS - CSS به چه ترتیبی اعمال می شود؟
• ویژگی - چگونه مرورگر محاسبه می کند که کدام CSS اعمال می شود (و کدام نه)
• خصوصیات CSS رایج و پرکاربرد چگونه کار می کنند
• مدل جعبه CSS چگونه کار می کند
• فلکس باکس چگونه کار می کند و چگونه از آن استفاده کنید
• اصول اولیه نحوه کار شبکه CSS

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

6. تفکیک نگرانی ها بین محتوا و سبک را کاهش می دهد

فلسفه اصلی CSS این بود که شما باید ساتایل خود (CSS) را از ساختار سند و محتوای خود (HTML) جدا کنید. اگر بتوانید این کار را انجام دهید، یک طراح به راحتی می تواند سبک یک سند را بدون دست زدن به هیچ یک از فایل های HTML و تأثیر بر محتوا تغییر دهد.

مثال متعارف این CSS Zen Garden است، وب‌سایتی که به‌دلیل مجموعه‌ای از شیوه نامه‌های شخص ثالث، ظاهر بسیار متفاوتی دارد.

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

آیا تا به حال پروژه بزرگی داشته اید که برای آن HTML را بدون تغییر هیچ CSS بازسازی کرده باشید؟ یا یکی که در آن می‌خواستید سایت را به طور کامل بدون تنظیم HTML تغییر دهید؟ به احتمال زیاد!

من فکر می کنم در عمل، این یک استدلال قوی علیه Tailwind نیست، اما اگر فکر می کنید این برای روش کار شما مهم است، قابل تامل است.

نتیجه

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

منبع Phpprotips