We Aren't Praying Hard Enough: An Emoji CSS Framework ☠️
BEMoji turns emoji and the BEM methodology into a CSS framework with design tokens, utility classes, and a CLI.
Few people think about it, but the CSS specification lets you use emoji as class names. As far as the specification and Unicode are concerned, they’re just valid text characters. Since it’s technically possible, something like this was only a matter of time.
Meet BEMoji, a full-fledged CSS framework built on emoji and the BEM methodology (Block-Element-Modifier).
To give you an idea of the scale of this tragedy, here’s what the author thinks the markup for a standard card component should look like:
<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>It would be one thing if this were just a quick joke. But the author took it completely seriously: there are design tokens, utility classes for spacing and colors, and even a full toolchain (BEMoji CLI) for generating styles.
Code readability has obviously left the chat, and the codebase is turning into ancient Egyptian hieroglyphics. But as a concept, it’s pure delight and a complete break from convention.