このCSSは難読すぎる！ 絵文字をclass名に使用したBEMメソッドの本番環境レベルで使えるCSSフレームワーク -BEMoji

ぱっと見、なんじゃこりゃ！ と思ったのですが、よく見ると絵文字をclass名としてしっかりとしたBEMメソッドで実装された、本番環境レベルで使えるCSSのフレームワークを紹介します。

完全なデザイントークンシステム、プリビルドコンポーネント、レスポンシブユーティリティ、さらにビルドツールチェーンも付属しています。

BEMoji
BEMoji -GitHub

BEMojiは、絵文字をclass名として使用するBEM（Block–Element–Modifier）メソッドで実装された、本番環境レベルのCSSフレームワークです。デザイントークンシステム、プリビルドコンポーネント、レスポンシブユーティリティ、ビルドツールチェーンも付属しています。

BEMoji

BEMojiの主な特徴は、下記の通り。

• 難読化機能

  絵文字で記述されたclass名は競合他社にとって意味をなさないでしょう。複雑なビルド作業なしに、CSSモジュールのような難読化を実現できます。

• 語彙の強制

  すべてのUIコンセプトは、1つの標準的な絵文字に対応付けられます。

• 入力時間の短縮

  絵文字ピッカーを使用すると、2つのキーストロークで入力できます。

• これは実際に機能します

  モダンブラウザはCSSセレクタ内の絵文字をネイティブに処理します。コンパイラは古い環境向けにエスケープされたUnicodeフォールバックを処理します。

BEMojiではBEMの3層アーキテクチャをそのまま継承しています。唯一の違いはすべての識別子が絵文字になっていることです。

ブロック（Block）は独立した自己完結型のコンポーネントで、再利用が可能です。継承されたコンテキストは持ちません。

エレメント（Element）はブロックの一部で、単独では意味を持ちません。常にblock__elementの形式で表現されます。ブロックの外には存在できません。

修飾子（modifier）は外観や動作を変更するフラグで、基本クラスと併用して適用されます（block--modifier, block__element--modifier）。

BEMojiで使用されるclass名はすべて厳密で、解析可能な構造に従っています。二重アンダースコアと二重ハイフンの区切り文字はBEMから引き継がれており、人間には読みにくい形式であっても、機械にとっては読みやすい形式となっています

BEMojiの基本となるclass名

主なclass名は、下記のようになります。

Webサイトやスマホアプリでよく使用される絵文字のclass名も揃っています。BEMojiの仕様では、ブロック、要素、修飾子、状態、デザイントークン全体で143個の予約済み絵文字トークンが定義されています。

BEMojiで使用する標準的な絵文字

他にユーティリティでよく使用されるclassは、下記のようになります。

メディアクエリも絵文字のclass名でCSSを記述できます。

BEMojiによるメディアクエリ

BEMojiによるメディアクエリのCSSは、下記の通り。

BEMojiは、PostCSSのプラグインやVS Codeのエクステンション、ESLintのプラグイン、React / JSX Helpersなど、さまざまなツールとともに利用できます。

BEMojiの開発用ツール