shed.css


shed.cssはTED.comが公開しているOSSのCSSライブラリです。「CSSの終わりの始まり」をキャッチコピーとしています。詳細はまだ調べていませんが、ユーティリティファーストを元に設計されており、それぞれのクラスは1つの目的のみを持ち、各クラスを組み合わせて使う形となります。ある程度の学習だけで単純なクラスによるWebサイトをデザイン、管理出来る仕組みのようです。例えば

Code :
<button
  class="
    d:i-b
    f-w:700
    p-x:3
    p-y:.7
    b-r:.4
  "
>
  hoge
</button>

d:i-bはdisplay: inline-block、f-w:700はfont-weight: 700、b-r:.4ならborder-radius: var(--z-dot4)といった具合に、規則され学習すればCSSを確認せずにHTMLを書くと同時にデザインも出来るのでCSSを書く必要はほとんどなくなる、みたい考え方だと思います。

クラスに:(コロン)が入ってますが\でエスケープ処理されています。

Code :
.f\:10 { font-size: var(--z-10); }

確かに覚えればかなり楽できそうですね。個人的に作ったフレームワークもそろそろ卒業しないと、と思っているので参考にしてみようかと思います。ライセンスはISC(ISCライセンスとは)です。

shed.css