CSS変数ベースで一貫したデザインのコンポーネント構築できるCSSフレームワーク・「Open Props」

Open Props

Open PropsはCSS変数ベースで一貫したデザインのコンポーネント構築できるCSSフレームワークです。

Google Chormeの開発に関わっている方が開発されたみたいでMITライセンスの元でソースコードが公開されています。

ユーティリティファーストな設計となっていますが、classではなく、ユーティリティ変数で構成されています。

@import "https://unpkg.com/open-props";
.block-wrap {
  display: flex;
  flex-wrap: wrap;
  flex-basis: var(--size-content-2);
  gap: var(--size-5) var(--size-8);
  align-items: flex-start;
}

Webサイトの設計に必要になる設定が既に定義されているので任意の要素にそれぞれの変数を当てればいいだけなので一貫したスタイルのコンポーネントの管理に貢献してくれます。

某所ではGoogle chrome開発チームによるTailwind代替とありましたが、そうではない様であくまで個人のサイドプロジェクトの様です。

Open Props