معرفی سریع تیل‌ویند

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

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

ماجرا چیه؟

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

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

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

تیل‌ویند اما مدل دیگری به موضوع نگاه می‌کند. تیل‌ویند، یک چهارچوب نیست بلکه مجموعه‌ای از ابزارها (utilities) است. این‌جا، هدف این است که ابزارها که هر یک فقط یک کار می‌کنند در پرونده قالب‌دهی (معمولا styles.css ) قرار بگیرند و باقی کارها، داخل همان پرونده html انجام شود.

تیل‌ویند در عمل

فرض کنید که شما بخواهیم یک div داشته باشیم با حاشیه‌ای مشخص. در روش مرسوم باید چنین کنیم:

<style>
.myDiv {
  margin: 2rem;
  bachground-color: white;
}
</style>

<div class="mydiv">
  فلان و بهمان
</div>

اگر بخواهیم همین را با تیل‌ویند بنویسیم چنین می‌شود:

<div class="m-8 bg-white">
  فلان و بهمان
</div>

مزیت‌ها

سریع

با تیل‌ویند خیلی سریع و (و تا حدود زیادی) بی‌دردسر می‌توان یک صفحه را طراحی کرد. نیازی نوشتن قالب‌بندی پیچیده و تو در تو نیست. به کمک تیل‌ویند می‌شود کل یک صفحه را تنها در چند دقیقه و تنها با ویرایش پرونده html آن هم در حین ساخت آن پیاده‌سازی کرد.

قابلیت درک سریع

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

هماهنگی سراسری در طراحی

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

نهایت سادگی در طراحی واکنش‌گرا

تیل‌ویند تخصیص ابزارهای مختلف برای اندازه‌های مختلف صفحه نمایش را بسیار آسان کرده است. مثلا کد زیر می‌گوید حاشیه داخلی 1rem باشد اما وقتی صفحه بزرگ‌تر می‌شود بشود 2rem و در صفحه‌های خیلی بزرگ بشود 3rem:

<div class="p-4 lg:p-8 2xl:p-12">
    فلان و بهمان
</div>

و اگر دقت کرده باشید می‌بینید که تیل‌ویند، از قاعده «اول گوشی» یا همون Mobile First پیروی می‌کند.

جمع‌بندی

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