‏BEMoji: فریم‌ورک CSS با کلاس‌نام‌های ایموجی

BEMoji یه فریم‌ورک CSS است که با یه ایده‌ی عجیب ولی حساب‌شده ساخته شده: همون معماری سه‌لایه‌ی BEM (Block، Element، Modifier) رو نگه داشته، ولی تمام شناسه‌ها — از بلوک‌ها و المان‌ها گرفته تا موضع‌ها، بریک‌پوینت‌ها، و حتی متغیرهای CSS — رو با ایموجی جایگزین کرده. نتیجه؟ کدی که بدون داکس کاملاً ناخوانا به نظر می‌رسه.

ساختار کلاس‌ها همون منطق دوآندرلاین و دو خط‌تیره‌ی BEM رو داره. مثلاً 🃏__🖼️--🌟 معادل card__image--featured می‌شه. بلوک‌ها ایموجی‌هایی مثل 🃏 (card) یا 🧭 (navbar) دارن، المان‌ها با __ بهشون وصل می‌شن، و مودیفایرها با -- حالت یا اندازه رو مشخص می‌کنن. حتی توکن‌های طراحی مثل رنگ‌ها (--⬜: #ffffff) و فاصله‌گذاری (--📏-4: 1rem) هم با ایموجی تعریف می‌شن.

یه فایل bemoji.config.js به عنوان قرارداد مرکزی پروژه عمل می‌کنه و نگاشت بین اسم‌های خوانا و ایموجی رو نگه می‌داره:

export default {
  blocks:    { card: '🃏', navbar: '🧭', modal: '🪟' },
  elements:  { image: '🖼️', title: '🔠', button: '🔘' },
  modifiers: { primary: '🌟', danger: '🔴', ghost: '👻' },
};

تیم موقع توسعه اسم‌های خوانا می‌نویسه و ابزارهای build اون‌ها رو به ایموجی تبدیل می‌کنن. پلاگین PostCSS، پلاگین Vite، افزونه‌ی VS Code (با autocomplete و hover tooltip)، پلاگین ESLint، و یه helper برای React همه با هم یه اکوسیستم کامل می‌سازن. مثلاً helper مخصوص React این‌طوری کار می‌کنه:

import { bem } from 'bemoji/react';

bem('card')                          // → '🃏'
bem('card__image', { featured: true }) // → '🃏__🖼️ 🃏__🖼️--🌟'

دلایل جدی‌ای پشت این ایده هست. اول اینکه کلاس‌نام‌های ایموجی در سورس‌کد مرورگر برای scraperها و رقبا بی‌معنیه — یعنی obfuscation رایگان. دوم اینکه چون هر مفهوم UI دقیقاً یه ایموجی داره، بحث‌های naming به جای اینکه درباره‌ی btn در مقابل button باشه، می‌شه «کدوم ایموجی درست‌تره» — که خیلی سریع‌تر حل می‌شه. سوم، هر تغییر در مفهوم‌ها یه خط تغییر در config کافیه. البته خودِ سازندگان صادقانه اعتراف می‌کنن که این فریم‌ورک برای همه مناسب نیست و بدون toolchain و buy-in تیم، بیشتر دردسر می‌شه تا راه‌حل.

نکات کلیدی:

• BEMoji همون منطق BEM رو داره، فقط همه‌چیز با ایموجی نام‌گذاری شده
• فایل bemoji.config.js نگاشت بین اسم‌های خوانا و ایموجی رو مدیریت می‌کنه
• اکوسیستم شامل پلاگین‌های PostCSS، Vite، افزونه VS Code، ESLint، و React helper می‌شه
• ۱۴۳ توکن ایموجی و ۲۴ کامپوننت آماده در فریم‌ورک وجود داره
• obfuscation خودکار در خروجی production بدون نیاز به CSS Modules از مزایای اصلیه
• بدون JS در runtime کار می‌کنه و حجم بسته‌بندی‌شده حدود ۴ کیلوبایت است