FCSS 2、クラス名を本物のCSSプロパティそのままにしたUtility CSS

FCSS 2: Utility CSS that reads like CSS

FCSS 2は、クラス名を実際のCSSプロパティと値で構成するUtility CSSライブラリだ。bg-blueではなくbackground-color--blueと書き、1クラスが1宣言に対応する。hoverやARIA、ブレークポイントも名前に含まれ、ランタイムは不要。Vite、Next.js、Astro、Angularに対応し、ビルド時に未使用クラスを削除する。

CSSを知っていれば、すでにFCSSを知っている。
  1. rhdunn

    時間が経つにつれて、tailwind/FCSS(1つのCSSスタイルにつき1つのクラス)とBootstrap(クラスがコンポーネントを反映する)のようなものの間でバランスを見つけるようになった。

    具体的には:

    1. HTML要素/属性にデフォルトスタイルのベースラインを提供する;

    2. さまざまなレイアウト用のクラスセットを提供する:grid、flex、masonryなど;

    3. さまざまな要素にスタイルの組み合わせを提供する:ol.flex/ul.flexはリストタイプとパディングを削除し、dl.gridはグリッドスタイルの表示リストを提供する、など;

    4. ベースクラスや要素と組み合わせるヘルパーを提供する:flex.verticalで向きを制御;flex.wrap/grid.wrapでレイアウトを折り返し;*.centeredでテキストを中央揃え;など。

  2. bemtevi

    これはまさに昔のHTMLそのものだな。みんなHTMLコード自体に全部指定してた頃のやつ!

  3. dankobgd

    やつらは普通のCSSを書く以外なら何でもやるんだな。

この日のほかの記事

2026-10-14