PostCSS + cssnext なCSSフレームワークを作成中。
最近ちまちまと開発しているCSSフレームワーク「PonDeStyle」が、まだ最初のリリースにも至っていないものの形になってきた気がするのでちょっと紹介というか、作った背景とかを雑記します。
PostCSS なフレームワークが欲しかった。
最近はスタイルまわりのあれこれはほぼ PostCSS を使っているんですが、巷にあふれるCSSフレームワークはSass（SCSS）製がほとんどなんですよね。まあそれでも使えないことはないんでしょうが、ここらで PostCSS かつ cssnext な文法でCSSビルド環境のファイナルジャッジをキメたいということで、一から作り始めました。
使用するPostCSSプラグインは postcss-import と cssnext の一部である
- postcss-nesting
- postcss-calc
- postcss-custom-properties
- postcss-custom-media
- postcss-color-function
- postcss-selector-matches
- postcss-apply
を必須として、オプションでautoprefixer、cssnanoの利用を推奨するという感じの構成となっています。いくらでも拡張できるのが PostCSS の特徴ではありますが、構成が複雑になると小規模な開発での環境構築が面倒になるので、最低限 import と cssnext だけで使えるようにしました。
おもな機能・設計など
中身的には、Flexbox なレイアウトシステム、日本語フォント設定、フォーム、コンポーネント群、ヘルパークラス群を収録して、命名規則は MindBEMding、ノーマライズに ress.css を使用という感じ。CSSのみなのでJSは各人お好みのを。
対応ブラウザは IE11 以上と2バージョン前までのFF、Chrome、Edge、Safari としています。そういえばフレームワーク開発に至った理由のもう一つに、OOCSS的な設計のフレームワークがあまり好きじゃないというのもありました。
そもそもが PostCSS の開発環境に組み込むために作り始めたものなので、成果物のCSSをそのまま読み込むよりも、それぞれの環境に @import して使うのを想定していて、 yarn add pondestyle （まだnpmにpublishしてない）したあとに
@import 'PonDeStyle';
:root {
--primary-color: blue; /* カスタムプロパティ上書き */
}
.another-section {
@apply text-center; /* Applyルール */
@apply text-left-tablet;
@media (--tablet) { /* カスタムメディアクエリ */
color: var(--primary-color);
}
}というふうに利用します。
Applyルールでレイアウト
他のプリプロセッサのMixin等の代わりにApplyルール （仕様書）で主要な機能をカバーできるようにしており、たとえば1ラインにつきアイテムをモバイルで1つ、タブレットで2つ、デスクトップで3つ、ワイド画面で4つ表示するようなレイアウトを作るには、
.anothercolumn {
@apply --columns-initial;
@apply --columns-wrapped;
&__item {
@apply --columns-item-initial;
@apply --columns-item-half-tablet;
@apply --columns-item-third-desktop;
@apply --columns-item-quarter-wide;
}
}というふうに書きます。Chrome Canary でフラッグ有効にすれば変換なしでも表示できるらしいですよ。
カスタムプロパティなどはともかくApplyルールは Mixin ほど高機能ではないので辛いところもありますが、まあまあ便利なのでよしとしました。
Applyルール・カスタムプロパティともに現在は :root セレクタにしか書けないという縛りがありますが（DOM解析できないので）、変換しなくても良いほどにブラウザ対応が進めば真の力を発揮してくれます。カスタムプロパティはIE11 以外の主要ブラウザはすべて実装済みなので、 IE11 を考えなくても良くなる頃に解禁ですね。
まだ細部がガバガバなので、さらに詰めつつ新しいコンポーネントの追加などを今後はやっていく予定です。あとドキュメントの作成もちまちまと。
本番環境で使うには至らない段階ですが、ぜひ覗いてみてね。→ GitHub
