Мы недостаточно молимся: CSS-фреймворк на эмодзи ☠️
BEMoji превращает эмодзи и методологию БЭМ в CSS-фреймворк с дизайн-токенами, утилитарными классами и CLI.
Мало кто задумывается, но спецификация CSS позволяет использовать Emoji в качестве названий классов. С точки зрения спецификации и Unicode — это просто валидные текстовые символы. Раз это технически возможно, то появление чего-то подобного было лишь вопросом времени.
Встречайте BEMoji — полноценный CSS-фреймворк, построенный на эмодзи и методологии БЭМ (Блок-Элемент-Модификатор).
Чтобы вы понимали масштаб трагедии, вот как по задумке автора выглядит разметка стандартного компонента карточки:
<article class="🃏">
<div class="🃏__🖼 🃏__🖼--🌟">
<img src="hero.jpg" alt="..." />
</div>
<div class="🃏__📝">
<h2 class="🃏__🔠">Card Title</h2>
<p class="🃏__💬">Card description text</p>
</div>
<footer class="🃏__🦶">
<button class="🔘 🔘--🌟">Primary</button>
<button class="🔘 🔘--👻">Disabled</button>
</footer>
</article>И ладно бы это была просто минутная шутка. Автор подошел к делу со всей серьезностью: внутри есть дизайн-токены, утилитарные классы для отступов/цветов и даже полноценный тулинг (BEMoji CLI) для генерации стилей.
Читабельность кода, конечно, вышла из чата, а кодовая база превращается в древнеегипетские иероглифы. Но как концепт — это чистый восторг и разрыв шаблонов.