رکورد تصمیم معماری: چارچوب CSS

فهرست مطالب:

• خلاصه
  • مسئله
  • تصمیم
  • وضعیت
• جزئیات
  • مفروضات
  • قیود
  • مواضع
  • استدلال
  • پیامدها
• مرتبط
  • تصمیمات مرتبط
  • الزامات مرتبط
  • مصنوعات مرتبط
  • اصول مرتبط
• توضیحات

خلاصه

مسئله

می‌خواهیم برای ساخت برنامه‌های وب خود از یک چارچوب CSS استفاده کنیم:

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

• می‌خواهیم در طراحی، چیدمان، UI/UX و غیره تکرار سریع داشته باشیم.

• برنامه‌های واکنش‌گرا (responsive) می‌خواهیم، به‌ویژه برای صفحه‌نمایش‌های کوچک مانند دستگاه‌های موبایل، صفحه‌نمایش‌های بزرگ مانند نمایشگرهای عریض 4K و صفحه‌نمایش‌های پویا مانند نمایشگرهای چرخان.

تصمیم

Bulma انتخاب شد.

وضعیت

Bulma انتخاب شد. برای گزینه‌های جدید چارچوب CSS هنگام ظهورشان آماده‌ایم.

جزئیات

مفروضات

می‌خواهیم برنامه‌های وبی بسازیم که مدرن، سریع، قابل‌اعتماد، واکنش‌گرا و غیره باشند.

برنامه‌های وب مدرن معمولاً به چند دلیل استفاده از jQuery را کاهش می‌دهند یا حذف می‌کنند:

• جاوااسکریپت مدرن به‌تدریج بسیاری از قابلیت‌هایی را که jQuery فراهم می‌کرد در خود جای می‌دهد، بنابراین نیاز به jQuery کمتر است و ماژول‌های بهتر/سریع‌تر/کوچک‌تری هستند که پیاده‌سازی‌های مشخصی ارائه می‌دهند

• رویکرد گستردهٔ jQuery دستکاری مستقیم DOM است که برای چارچوب‌های جاوااسکریپت مدرن (مثلاً React، Vue، Svelte) یک ضدالگو است

• اگر jQuery دو بار بارگذاری شود با خودش تداخل پیدا می‌کند و غیره

قیود

اگر چارچوب CSS‌ای انتخاب کنیم که از jQuery استفاده می‌کند، مجبوریم jQuery را وارد کنیم. برای مثال، Semantic UI از jQuery استفاده می‌کند و Tachyons استفاده نمی‌کند.

اگر چارچوب CSS‌ای حداقلی انتخاب کنیم، از مؤلفه‌های چارچوبی که ممکن است اکنون یا به‌زودی بخواهیم صرف‌نظر می‌کنیم. برای مثال، Semantic UI یک چرخ‌فلک تصویر ارائه می‌دهد و Tachyons ارائه نمی‌دهد.

مواضع

استفاده نکردن از هیچ چارچوبی را بررسی کردیم. این هنوز عملی به نظر می‌رسد، به‌ویژه چون CSS grid بیشتر آنچه را برای پروژهٔ ما لازم است فراهم می‌کند..

با یک غربال‌گری سریع، چارچوب‌های CSS بسیاری را بررسی کردیم: Bootstrap، Bulma، Foundation، Materialize، Semantic UI، Tachyons و غیره. دو انتخاب ما برای بررسی عمیق‌تر Semantic UI (چون معنایی‌ترین رویکرد را دارد) و Bulma (چون سبک‌ترین رویکرد را دارد و مؤلفه‌هایی را که اکنون می‌خواهیم ارائه می‌دهد) هستند.

Semantic UI را بررسی کردیم. این چارچوب مؤلفه‌های بسیاری ارائه می‌دهد، از جمله مواردی که برای پروژهٔ خود می‌خواهیم: تب‌ها، گریدها، دکمه‌ها و غیره. با Semantic UI به دو شکل آزمایش کردیم: با فایل‌های معمول CDN و با مخازن NPM. در یک صفحهٔ HTML ایستا با Semantic UI موفق شدیم، اما در مهلت زمانی خود برای ساخت یک SPA جاوااسکریپتی موفق نشدیم (عمدتاً به دلیل مشکلات بارگذاری jQuery). دریافتیم که برنامه‌نویسان دیگر از توسعه‌دهندگان Semantic UI می‌خواهند نسخه‌ای بدون jQuery بسازند، به همان دلایلی که ما داریم. برنامه‌نویسان دیگر سال‌هاست نسخهٔ بدون jQuery را درخواست می‌کنند، اما توسعه‌دهندگان پاسخ منفی داده‌اند و گفته‌اند هر نسخهٔ بدون jQuery نوشتنش بسیار سخت است، مثلاً ~«پروژهٔ Semantic UI بیش از 22,000 نقطه تماس دارد که از jQuery استفاده می‌کنند».

نمونه با Semantic:

<div class="ui top attached tabular menu">
  <a class="item">Alpha</a>
  <a class="item">Bravo</a>
</div>

Bulma را بررسی کردیم. Bulma قابلیت‌های مشابه بسیاری با Semantic UI دارد، هرچند مؤلفه‌های پیچیدهٔ کمتری. Bulma با تکنیک‌های مدرن ساخته شده است، مانند نبود jQuery. Bulma چند مؤلفهٔ شخص ثالث دارد که ممکن است بخواهیم از برخی استفاده کنیم.

نمونه با Bulma:

<div class="tabs">
  <ul>
    <li><a>Alpha</a></li>
    <li><a>Bravo</a></li>
  </ul>
</div>

استدلال

همان‌طور که بالا آمد.

به‌طور مشخص، Semantic UI هم از نظر فناوری (یعنی نقاط تماس بسیار زیاد jQuery) و هم از نظر رهبری (یعنی بدون jQuery بودن پاسخ منفی قاطع بود، به‌جای تلاش برای نقشهٔ راه، یا بهبود مستمر، یا جمع‌آوری کمک مالی و غیره) پرچم احتیاط دارد.

پیامدها

اگر چارچوب CSS خوب بدون jQuery بیابیم، این به‌طور کلی مفید و خوب است.

مرتبط

تصمیمات مرتبط

چارچوب CSS‌ای که انتخاب می‌کنیم ممکن است بر قابلیت آزمون تأثیر بگذارد.

الزامات مرتبط

می‌خواهیم یک برنامهٔ کاملاً مدرن را سریع عرضه کنیم.

نمی‌خواهیم وقت خود را صرف کار روی چارچوب‌های قدیمی‌تر (به‌ویژه Semantic UI) با وابستگی‌های قدیمی‌تر (به‌ویژه jQuery) کنیم.

مصنوعات مرتبط

بر همهٔ HTML معمولی که از CSS استفاده خواهد کرد تأثیر می‌گذارد.

اصول مرتبط

به‌آسانی برگشت‌پذیر.

نیاز به سرعت.

توضیحات

هر توضیحی اینجا.