Open Propsとは？
Open Props はCSSフレームワークの一種で、たくさんのCSSカスタムプロパティ（変数）を提供します。極端な言い方をすると、ただの定数の集合体です。これをフレームワークにカテゴライズしても良いのかな？と疑問に思うぐらいにシンプルな発想です。
例えば、Open Props には、”--font-size-5”というCSSカスタムプロティが定義されています。このプロパティの値は”2rem”となっています。
<p style="font-size: var(--font-size-5);">こんにちは</p>
このように記述すると2remの大きさで「こんにちは」と表示されます。
<p style="font-size: 2rem;">こんにちは</p>
Open Props を使わずにこのように記述しているのと同じです。
どういったところが嬉しいのか？
デザインを同じ色やサイズに統一するのが簡単でブレにくい。開発する時にCSSを追加するだけで使い始めることができます。全体に適用しなくても部分に適用していくことも可能です。
シンプルな定数の集合なので、FOCSS や BEM などの他のCSS設計や自前のCSS設計に適用することも可能です。
CSSカスタムプロパティ（変数）とは？
CSSカスタムプロパティはCSSの標準機能で Open Props はこの機能を利用しています。
複雑なウェブサイトには膨大な量の CSS が含まれており、
その結果、CSS の値が重複することがよくあります。
例えば、スタイルシートの異なる場所で同じ色が使用されていることはよくあります。
多くの場所で重複している色を変更するには、
すべてのルールと CSS ファイルを検索して置換する必要があります。
カスタムプロパティを使用すると、値を 1 か所で定義し、
他の複数の場所で参照できるため、作業が容易になります。
また、可読性と意味づけも利点のひとつです。
例えば、
--main-text-color は 16 進数表記のカラーコード #00ff00 よりも理解しやすく、
特にその色が様々なコンテキストで使用される場合にはその傾向が顕著です。
サンプルコード
OpenPropsの例
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/open-props">
<link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css">
<style>
.open-props-sample {
font-size: var(--font-size-5);
text-decoration: underline;
text-decoration-color: var(--blue-5);
text-decoration-thickness: var(--border-size-2);
}
</style>
</head>
<body>
<p class="open-props-sample">
Open Propsでスタイルを適用した例です。
</p>
</body>
</html>
Open Propsを使ってフォントサイズ・下線・色・線の太さを指定しています。
TailWindの例
別のCSSフレームワークであるTailWindを使って、先ほどのOpen Propsを使った例と同じような表現をしてみます。
<html>
<head>
<link href="./output.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p class="text-3xl underline decoration-blue-500 decoration-2">
Tailwind CSSでスタイルを適用した例です。
</p>
</body>
</html>
TailWindを使ってフォントサイズ・下線・色・線の太さを指定しています。
TailWindなどのCSSフレームワークでは用意されたクラスを設定することでスタイルを表現しますが、Open Props はクラスではなくCSS カスタムプロパティ（変数）が用意されており、それを使ってスタイルを表現します。
OpenPropsとTailWindの比較
| OpenProps | TailWind | |
|---|---|---|
| 記述スタイル | フレームワークが用意したCSS変数をプロパティの値に指定する | フレームワークが用意したCSSクラスをHTMLタグのクラスに指定する |
| 学習 | 標準CSSについての知識が必要 | どんなクラスが用意されているか、ある程度知っておく必要がある |
| 部品化 | 別途CSS設計が必要 | apply機能でクラスをまとめることができる |
| メリット | 他のCSS設計と親和性が高い | 迅速にスタイルを適用できる |
| デメリット | 迅速にスタイルを適用するのは苦手 | 部品化しないとHTMLタグが長くなりがち |
最後に
State of CSS 2023 の満足度1位になっていたので気になっていました。2024年ではどうなっているでしょうか。
Open Props はデザインの統一感を保ちながらも自由にカスタマイズできるので、フレームワークに慣れていない、あるいは特定のフレームワークに大きく依存したくないといった状況下でも導入しやすいのではないかと思いました。