Beer CSSとは
Material Design 3をベースにした軽量CSSフレームワークです。Material Designのユーザーインターフェイス（UI）をすぐに実装できる点が最大の特徴です。
他のMaterial DesignベースのCSSフレームワークと比べて10分の1のサイズであり、セマンティックなHTMLで実装できます。従来の高機能なCSSフレームワークはユーティリティクラスを駆使して、HTMLにセマンティックさが欠けることも多かったですが、Beer CSSではそれを避けることができます。
また、従来の高機能なCSSフレームワークがバージョンアップに伴い肥大化し複雑になっているという問題点を背景に、Beer CSSはシンプルさと効率性を重視して開発されました。ビルド手順や複雑な設定、依存関係などは不要なので、非常に簡単に導入できます。
この手軽さは開発効率を向上させてくれる魅力的なポイントです。
構成要素 (Settings, Elements, Helper)
Beer CSSは、設定/Settings、要素/Elements、ヘルパー/Helperという3つの主要な要素で構成されています。
- 設定（Settings）
設定はドキュメント全体に影響を与えるものです。例えば、<body class="dark|light">...</body> のように body タグの class 属性で基本的なテーマを設定します。Beer CSSには、デフォルトテーマに関する様々なCSS変数が定義されています。 - 要素（Elements）
要素は、Webサイトやアプリで使用される個々のUIコンポーネントやHTMLタグを指します。これらは Material Design 3 のガイドラインに従ってスタイリングされています。 - ヘルパー（Helper）
ヘルパーは要素をよりスケーラブルでカスタマイズ可能にするためのユーティリティクラスです。要素に対して複数のヘルパークラスを適用することで、デザインの柔軟性を高めることができます。
設定クラス例（基本的なレイアウトや振る舞いを定義）
<!-- container: コンテンツの最大幅と中央配置を設定 -->
<div class="container">...</div>
<!-- fixed: 要素の固定位置を設定 -->
<header class="fixed top">...</header>
<!-- grid: グリッドレイアウトを設定 -->
<div class="grid">...</div>
<!-- responsive: レスポンシブな振る舞いを設定 -->
<img class="responsive" src="...">
要素クラス例（UIコンポーネントを定義）
<!-- card: カードコンポーネント -->
<article>...</article>
<!-- button: ボタンコンポーネント -->
<button>...</button>
<!-- icon: アイコンボタンコンポーネント -->
<button>
<i>search</i>
</button>
<!-- circle: 円形コンポーネント -->
<img class="circle" src="...">
ヘルパークラス例（補助的なスタイリング）
<!-- レイアウトヘルパー -->
<div class="row">...</div> <!-- 横並び -->
<div class="column">...</div> <!-- 縦並び -->
<div class="middle">...</div> <!-- 垂直中央揃え -->
<div class="center">...</div> <!-- 水平中央揃え -->
<!-- 間隔ヘルパー -->
<div class="margin">...</div> <!-- マージン -->
<div class="padding">...</div> <!-- パディング -->
<!-- テキストヘルパー -->
<p class="bold">...</p> <!-- 太字 -->
<p class="truncate">...</p> <!-- テキスト省略 -->
BeerCSSで基本的なコンポーネントを実装
実装例：ボタン
まずは簡単にボタンを実装してみました。以下のコードを見ていただくと、buttonタグをそのまま使用しているのがわかります。クラスにはprimaryなどを指定しており、「primaryのbutton」という意味的な表現が強く出ています。
Tailwind CSSでは低レベルのユーティリティクラスを用いて細かくデザインをスタイリングしていきますが、Beer CSSではMaterial Designをベースにしているメリットがよく表れています
<button>デフォルトボタン</button>
<button class="primary">プライマリーボタン</button>
<button class="secondary">セカンダリーボタン</button>
<button class="tertiary">ターシャリーボタン</button>
実装例：Article
articleも同様に、意味的な表現が際立っています。シンプルで理解しやすいHTML構造となっています。
<article>
<h5>Title</h5>
<p>Some text here</p>
</article>
このように、BeerCSSではセマンティックなHTMLを自然に書くことができ、その上でMaterial Designのスタイリングが適用されるという利点があります。
ZennのLPを実装してみた
Zennに似たレイアウトのLPを作成してみました。Materialデザインをベースにしているので完全に同じではないですが、似たようなレイアウトは30分から1時間程度で完成しました。
デザインを近づけるような実装をしたのですが、Materialデザインベースを捨てることになるので、BeerCSSのメリットは薄れると感じました。GmailのようなMaterialデザインベースのwebサイトであれば、かなり近づけcloneすることもできたかと思います(すでに公式サイトで提供されているので、今回は題材にするのをやめました。https://codepen.io/leo-bnu/pen/rNjjeYN)
BeerCSSの特徴が表れている機能とコード
今回作成したLPの中でBeerCSSの特徴的な機能とその実装コードを以下にリストアップします。
1. Material Designベースのレイアウト構造
1.1 フレックスボックスのセマンティックな表現
<!-- row/columnによる方向性の明示 -->
<div class="row space-between">
<div class="column gap-1">
<!-- コンテンツ -->
</div>
</div>
<!-- 垂直方向の整列 -->
<div class="row middle gap-2">
<span class="text-small">3分前に更新</span>
<span class="text-small"><i>favorite</i> 123</span>
</div>
1.2 空間配分のセマンティックな表現
<!-- 両端揃えのレイアウト -->
<div class="row space-between">
<!-- 左側コンテンツ -->
<!-- 右側コンテンツ -->
</div>
<!-- フレックス成長の有効化 -->
<div class="column space-between flex">
<h2 class="article-title">React Nativeでモバイルアプリ開発入門</h2>
<!-- メタ情報 -->
</div>
2. Material Designのコンポーネント表現
2.1 カード要素
<!-- hoverable付きのカード表現 -->
<article class="hoverable">
<div class="row">
<!-- カード内容 -->
</div>
</article>
2.2 サーフェス表現
<!-- Material Designのサーフェス概念 -->
<div class="article-emoji surface">📱</div>
2.3 アイコン表現
<!-- Material Iconsの使用 -->
<i aria-hidden="true">search</i>
<i>favorite</i>
<i aria-hidden="true">notifications</i>
3. Material Designのタイポグラフィ
3.1 テキスト階層
<!-- 大見出し -->
<h1 class="text-large bold">Articles</h1>
<!-- 小さいテキスト -->
<p class="text-small text-secondary">新着記事一覧</p>
<!-- ボタンテキスト -->
<button>投稿する</button>
3.2 強調表現
<!-- ブランド名の強調 -->
<a href="/" class="text-large bold primary" aria-label="Zennホームページ">Zenn</a>
4. Material Designのインタラクション
4.1 ボタン表現
<!-- プライマリーアクションボタン -->
<button href="/new-post">投稿する</button>
<!-- アイコンボタン -->
<button aria-label="検索">
<i aria-hidden="true">search</i>
</button>
4.2 リップルエフェクト
<!-- hoverable要素のリップルエフェクト -->
<article class="hoverable">
<!-- 内容 -->
</article>
5. コンテナとスペーシング
5.1 コンテナ
<!-- メインコンテンツのコンテナ -->
<main class="container padding">
<!-- コンテンツ -->
</main>
5.2 ギャップ制御
<!-- 要素間の間隔 -->
<div class="column gap-1">
<!-- コンテンツ -->
</div>
<ul class="row gap-2 no-bullet">
<!-- リスト項目 -->
</ul>
6. リストの表現
6.1 ナビゲーションリスト
<!-- 装飾なしのリスト -->
<ul class="row gap-2 no-bullet">
<li><a href="#" class="text">Trending</a></li>
<li><a href="#" class="text">Following</a></li>
<li><a href="#" class="text">Explore</a></li>
</ul>
7. ファウンデーションとインポート
7.1 BeerCSSの読み込み
<!-- BeerCSSフレームワークの読み込み -->
<link href="https://cdn.jsdelivr.net/npm/beercss@3.9.7/dist/cdn/beer.min.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.9.7/dist/cdn/beer.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
8. 固定ヘッダー
8.1 ヘッダー固定
<!-- 上部固定ヘッダー -->
<header class="fixed top">
<!-- ヘッダーコンテンツ -->
</header>
9. メディア表現
9.1 円形画像
<!-- プロフィール画像の円形表示 -->
<img src="https://daiju08.vercel.app/profile-image.png" alt="プロフィール画像" class="circle">
これらの例は、BeerCSSがMaterial Design 3をどのようにHTMLのクラス名として提供し、セマンティックな表現を可能にしているかの例です。各クラス名は単なるスタイリングではなく、意味を持ち、デザインシステムの概念を直接表現しています。これにより、HTMLコードの意図がより明確になり、開発効率とアクセシビリティの両方が向上しています。
実装していて感じた違い
BeerCSSとtailwindの主な違い
- BeerCSSのコード
※space-betweenなど存在しないクラスは、自分で定義
<header class="fixed top">
<div>
<div class="row space-between">
<div class="column gap-1">
<a href="/" class="text-large bold primary">Zenn</a>
<nav>
<ul class="row gap-2 no-bullet">
<!-- 内容 -->
</ul>
</nav>
</div>
<!-- 省略 -->
</div>
</div>
</header>
- Tailwindのコード
<header class="fixed top-0 w-full z-10">
<div>
<div class="flex justify-between">
<div class="flex flex-col gap-1">
<a href="/" class="text-lg font-bold text-blue-500">Zenn</a>
<nav>
<ul class="flex gap-2 list-none">
<!-- 内容 -->
</ul>
</nav>
</div>
<!-- 省略 -->
</div>
</div>
</header>
-
クラス名の意味性/セマンティックな表現
BeerCSS: row, column,など、レイアウトの目的が直感的、primaryのような意味に基づくクラス
Tailwind: flex, flex-col, justify-betweenなど、CSS特性に基づいた命名、text-blue-500のような見た目に基づくクラス -
抽象化レベル
BeerCSS: Material Designに基づいた高レベルな抽象化（primaryなど）
Tailwind: より低レベルなユーティリティの集合（text-blue-500など） -
コード量と可読性
BeerCSS: より簡潔でドメイン指向のクラス名
Tailwind: より多くの低レベルユーティリティクラスの組み合わせ
このように、BeerCSSはコード自体がその目的や意味をより明確に表現できるため、TailwindよりもセマンティックなHTML構造の実装を可能にする傾向があります。
実装していた疑問に思ったこと
flexアイテムの配置(space-betweenクラス、)のヘルパーが効かなかったです。Githubのソースコードを見ていてもjustify-content: space-between;のヘルパーがなさそうでした。(justify-content: flex-startを表すleft-alignは存在しておりました。)
理由としては、left-alignはテキストの配置という具体的な視覚効果を表すのに対し、space-betweenはレイアウト構築の一部であり、抽象化レベルが異なることが理由と考えられます。
BeerCSSはspace-betweenのようなレイアウト特化の機能は、より高度なカスタマイズとして位置づけられているかもしれません。このアプローチにより、BeerCSSは基本的な機能を提供しつつも、フレームワークのサイズを最小限に保っていると考えられます。（サイズが1/10）
他にも使いたいけどサポートされていないヘルパークラスはあると思いますが、その反面メリットを享受していると考えると良さそうです。
まとめ
軽量CSSフレームワークBeerCSSを触ってみました。
Beer CSSは「セマンティックHTMLで記述することが特徴」と述べており、Material Design 3というデザインシステムとの親和性やフレームワークが提供するコンポーネントがセマンティックなHTML要素と自然に結びつくように設計されているようです。一方で、Tailwind CSSはユーティリティファーストなCSSフレームワークであり、スタイリングをHTML要素に直接適用することに重点を置いています。そのため、開発者は自由にHTML要素を選択できますが、セマンティックHTMLを意識するかどうかは開発者自身の判断に委ねられる部分が大きいです。この違いを理解するとBeerCSSのメリットが見えてくるかもしれません。
また、Material Designをベースにしているので抽象度が高いですが、その反面一貫性のあるデザインを維持しやすくなっています。一部ヘルパーもあるのである程度デザインを近づけることも可能です。
目的に応じて、それに合うようであれば積極的に導入していきたいです。
参考
Discussion