ハクソク

世界を動かす技術を、日本語で。

Pico CSS – セマンティックHTMLのためのミニマルCSSフレームワーク

260日前原文(picocss.com)

概要

  • Pico CSS は、ミニマルかつ軽量なスターターキット
  • セマンティックなHTMLだけで美しいレスポンシブデザインを実現
  • クラス指定がほぼ不要、純粋なCSSのみで動作
  • ライト／ダークモードや高いカスタマイズ性を標準搭載
  • パフォーマンス最適化と保守性の高さが特徴

Pico CSSの特徴

  • 最小限・軽量設計 HTML要素 に直接スタイルを適用、余計なクラスやJavaScript不要
  • セマンティック重視 10個未満の クラス のみ利用、クラスレスバージョンも提供
    • HTML本来の意味を活かしたマークアップ推奨
  • 純CSSで美しいデザイン 追加ライブラリやパッケージ管理不要、 HTMLとCSS だけで完結
  • 完全レスポンシブ対応 フォントサイズや間隔が 画面幅 に自動対応
    • 追加設定やクラス不要でモバイル・デスクトップ両対応
  • ライト・ダークモード自動切替 prefers-color-schemeに自動対応、 JavaScript不要
    • アクセシブルでニュートラルなカラースキーム2種を標準搭載
  • 高いカスタマイズ性 130以上の CSS変数 で簡単に調整可能
    • SASSや20種のカラーテーマ、30以上のモジュールコンポーネント利用可能
  • パフォーマンス最適化 不要なCSSやファイルを削減、 高速表示 と低メモリ消費
    • クラス指定や複雑なオーバーライド不要、HTMLがシンプル
  • 保守性・拡張性 シンプルな設計で メンテナンス容易
    • デザイン基盤としての拡張性確保

Pico CSSとユーティリティ系CSSフレームワークの比較

  • Pico CSS

    <form>
  <input type="text">
  <button type="submit">Action</button>
</form>
    • セマンティックなHTMLのみで 美しいUI を自動生成

  • ユーティリティCSSフレームワーク

    <div class="container display-flex my-md mx-sm">
  <form class="form shadow-md my-md mx-sm align-center">
    <div class="input-wrapper border-radius-sm">
      <input type="text" class="input text-color-gray placeholder-color-light-gray focus-outline-blue">
    </div>
    <div class="button-wrapper border-radius-sm">
      <button type="submit" class="button bg-color-blue text-color-white focus-light-blue hover-light-blue">
        Action
      </button>
    </div>
  </form>
</div>
    • 多数のクラス指定が必要、 HTMLが肥大化 しやすい

導入実績・人気

  • GitHub Stars: 14.8K
  • 月間Npmダウンロード数: 65.8K
  • 月間JSDelivrリクエスト数: 12.6M

まとめ

  • Pico CSS はシンプルなHTMLで 美しくレスポンシブ なWebを素早く構築可能
  • クリーンなデザイン基盤として、 保守性とパフォーマンス を両立
  • クラス指定やJavaScriptに頼らず、 CSS本来の力 を最大限活用

Hackerたちの意見

Pico大好き。ほとんどのサイドプロジェクトのスタート地点はこれだね。たまにNeat [0]に手を伸ばすこともあるけど、こっちはかなり小さいよ。

└

おお、それ俺のだ。言及してくれてありがとう！:) ほとんど全てに使ってるよ。デモで試して、Picoからアイデアを盗むメモを作ったところ。サイズは小さく保ちながらね。

クラスベースのCSSスープはもう勧められないな。ユーティリティクラスを使うと、他のものには戻れなくなるよ。めっちゃ直感的だし、CSSファイルをたくさん探し回らなくても、必要なクラスを追加したり削除したりできて、目の前でその変化が見えるからね。

└

クラスベースのCSSスープはもう勧められないな。 私も同じ！ 必要に応じてクラスを追加したり削除したりできる それ、まさにクラススープって言ったときに考えてたことだわ。 CSSファイルをたくさん探し回らなくても CSSはコンポーネントの中にあるべきだし、最悪でもコンポーネントの隣にある.cssファイルにあるはず。Reactのデフォルトが悪いからって、HTML要素に20個もクラスを追加する必要はないよね。

└

セマンティックに関するこれらの懸念は、ウェブの前の時代に属しているように感じる。20年前、RDFやセマンティックウェブが支配するって信じてた人たちと議論したのを覚えてるけど、結局そのユースケースは実現しなかった。

└

... そして、要素がどう見えるべきかを理解するために頭の中でCSSを解析しなきゃいけないほど、クラスが何十個もついた要素になってしまう。この方法論は、そもそもクラスを使う意味を完全に見失ってる。良いクラス名やID名は、マークアップと同じようにセマンティックであるべきだよ。CSSが何をするかを説明するんじゃなくて、要素が何であるかを説明するべき。さらに、直接CSSを書くことで避けられた無駄な抽象化を導入してる。.content-centerがalign-content: centerより良いって、どういうこと？Tailwindみたいなものは、ウェブ開発で起こった最悪のトレンドの一つだと思う。人々がCSSの使い方を忘れさせる一方で、全く役に立たない。正直、理解できないよ。もちろん、これを広範囲に使ったプロジェクトにも関わったけど、ほんとにひどい。

└

あの丘は狙われてるし、兵士たちは戦うけど、やっぱりやることによるよね。Jiraはクラスレスにはならないけど、ブログはそうなるかも。

└

タグが見えなくなって、テンプレートのユーティリティがスパゲッティ状態になってるHTMLをどう管理してるの？

└

これはほとんどクラスレスなフレームワークだね。つまり、タグ自体のスタイルを設定することが多いってこと。

└

…それで、特定のタイプのボタンを5px高くしたり、色を変えたりする必要があると、40個のボタン全部のユーティリティクラスを置き換えなきゃいけないんだよね。でも、同じユーティリティクラスを使ってる他の要素には手を加えない。もし、みんなに同じセマンティッククラス「.config-button」や「.sidebar-button」、「.btn-hero」とかを与えておけば、その変更を一箇所で済ませられたのに。もしCSSがぐちゃぐちゃになってるなら、はっきり言うけど、それは間違ってるよ。「CSSがどこにあるか探すためにたくさんのCSSファイルを掘り下げる必要がある」なんてことはないんだから。1) 要素を選択したときにブラウザのインスペクタにちゃんと表示されるし、2) CSSファイルは整理されてるべきだから、探すのも簡単なはず。クラスを見つけるのは関数定義を見つけるのと同じくらい簡単だよ。ユーティリティクラスは、ユーザーインターフェースを整理する手間を省きたい人がセマンティックな命名の利点を全部捨てるためのものだと思う。コードの他の部分を整理する価値は分かってるのにね。本当に理解できないわ。

ボタンやフォームの入力が、標準的なデスクトップUI要素に比べて大きすぎる。

└

うん。ブラウザで75%にズームアウトしないと、テキストが普通のサイズに見えなかったけど、「ウィジェット」はまだ大きくて不格好だった。これ、モバイルファーストだけじゃなくて、モバイルオンリー用にデザインされたのかな？

クラスなしのCSSテーマを簡単に切り替えたりプレビューしたりできるサイトもあるよ: https://www.cssbed.com/

└

Tufte、めっちゃエレガントだね。

└

あのリソースは好きだけど、重要なものが欠けてるね：github-markdown-css[1]。最近の開発者はGithubのマークダウンをたくさん読むから、CSSシステムのスタート地点としては妥当だと思う。1 - https://github.com/sindresorhus/github-markdown-css

Pico、大好き！素晴らしいスタート地点で、いろんな方向に簡単に調整できる。Tailwindの反対だね。

大きなプロジェクトにはTailwind CSSを使ってるけど、Pico CSSがぴったりな小さくて独立したケースもあるよ。彼らの「使用シナリオ」ページはまさにその通りだね：https://picocss.com/docs/usage-scenarios Pico CSSは先週見つけたばかりで、小さなHugoテーマに必要なものがまさにこれだった（govanity、Hugo用のGoモジュール/パッケージのバニティURL：https://github.com/foundata/hugo-theme-govanity）。Picoを見つけて、ドキュメントを読んで、統合するのに約2時間かかったよ。意外と見落としがちなのが、CSS変数：https://picocss.com/docs/css-variables と色：https://picocss.com/docs/colors。

└
  • URLが更新されたよ！

自分のサイト[1]にpicocssを使ってるんだけど、最近プレーンHTMLに変えたばかり。ちょっとしたバニラJSで、各ページにヘッダーとフッターを簡単に作れることに気づいた。どうせ何かマークアップを書く必要があるから、直接HTMLを書くのもありだよね。それに、picocssにはダークモードもあって、個人的にはそれが好き。 [1]: https://g5t.de

ウェブサイトのスタート地点としてPico CSSを使うのが好きなんだ（アプリじゃなくてね）。それを自分のDjangoスターターキットにも入れたよ（https://github.com/stribny/sidewinder/）。おすすめ！

ほんとにそうだね、これはすごい！ピクセルを使ってるのは残念だけど、物理単位や相対単位（pt/mm + em/ex/rem）の代わりに使うのはいいよね。それでもTailwindやBootstrapの恐ろしいものよりはマシだし。

このプロジェクトが進化していくのが本当に好き。メンテナンス性を損なうことなく、より良いアクセシビリティを持つコンポーネントを書く手助けをしてくれるし（実際、改善される）、カスタマイズも簡単なんだ。