Open Props の紹介

YAMAMOTO Yuji (山本悠滋)

2022-03-23 ラクスR&D Meetup - CSSフレームワーク

はじめまして! 👋😄

📝今日話すこと

🏋️自己紹介: どうしてもCSSを書きたい人

  1. CSSフレームワークが世に溢れる前から自前でちまちまと小規模なCSSを書いて楽しんでいた
  2. 就職して仕事でBootstrap製の管理サイトを触るも、イヤイヤやってた😩
  3. 今もTailwindCSSを覚えるのに抵抗が😰
    • 事実上「CSSじゃなく見える別言語」なのが怖い

🌠そんな時に現れたOpen Props

提供するのはユーティリティークラスではなくユーティリティー変数

いろいろ使った例:

#example {
  color: var(--gray-2);
  font-family: var(--font-mono);
  width: var(--size-xs);
  border-radius: var(--radius-blob-2);
  font-size: var(--font-size-fluid-3);
  padding: var(--size-fluid-5);
  background-image: var(--gradient-3);
}

💁‍♂Open Propsがもたらすもの

💰さらに!

まとめ