実案件で選ぶべきCSSフレームワーク

最良のCSSフレームワークというものはなく、ある種類の案件に合うフレームワークがあるだけです。200画面の管理画面とランディングページには、ほとんど共通点がありません。

この7つで、完全なデザインシステムから貼って忘れるスタイルシートまで一通り揃います。

ユーティリティ優先

Tailwind CSS

大きめのアプリで最も安全な既定解。CSSを書かなくなるので、CSSが増えなくなります。

tailwindcss.com

コンポーネント

Bootstrap

今週中に完成度の高いアクセシブルな管理画面が要る、という場面では依然として無敵です。

getbootstrap.com

コンポーネント

Bulma

Bootstrap並みの読みやすさをJavaScriptなしで。純CSSで上書きも簡単です。

bulma.io

デザイントークン

Open Props

余白・色・影のCSS変数が用意済み。特定のフレームワークに縛られません。

open-props.style

クラス不要

Pico CSS

セマンティックなHTMLがクラスゼロで見栄えします。ドキュメントや試作に最適です。

picocss.com

アトミックエンジン

UnoCSS

必要な分だけユーティリティを生成し、この中で最も小さい出力になります。

unocss.dev

Tailwind向けコンポーネント

daisyUI

Tailwindの上に実用的なコンポーネントとテーマを足し、マークアップ量を減らせます。

daisyui.com

案件の寿命で選んでください。長く生きるものほど、出来合いのコンポーネントよりトークンとユーティリティが向いています。

選ぶだけでなく、作る必要がありますか?

Webアプリ、API、インフラ、インターフェース。バルセロナ拠点のフリーランス、世界中のクライアントと。

問い合わせる


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *