qrac / musubii

Simple CSS Framework for JP
https://musubii.qranoko.jp
150 stars 6 forks source link

v8 2023 開発メモ #307

Closed qrac closed 2 months ago

qrac commented 8 months ago

3年半振りのメジャーアップデートを行う。v7公開は2020年1月だった。

2023年現在の実務に即した使い勝手の良い形にする。2021年末〜2022年3月に考えた #293 は考慮材料としつつ、それ自体は別プロジェクトの方向になったため新たに設計。

まず、制作者仲間との共通言語を増やすために、Design Tokens Community Groupのデザイントークンを踏襲。完全準拠ではなく、色やプロパティの呼び方は共通認識のあるものにした方が面倒が起きにくいだろうというレベルでの反映。

実際には、デザイントークンを取り入れたトレンドのフレームワークを参考にする方がわかりやすい。2016〜2018年あたりはBootstrapやBulmaだったが、2023年だとChakraの新プロジェクトに含まれるPanda CSSやTailwind CSSだろう。

ただ、利用を想定している実務は最新の環境ではない。Next.jsであればKuma UIや前述のフレームワークを使う方が楽なのでMUSUBiiでは追わない。個人的に担当することの多いJavaアプリケーション開発を楽にする方向に舵を切る。WordPressへのコピペも視野に。大きな違いは、パージせずに完結するCSSであること。

設計面だと、ブラウザ対応の進んだCSS Variablesを標準採用し、逆にSassを削除する。Sassのカスタマイズはborder-radius変更くらいしか使わなかったし、近年はビルドや依存関係の面倒ごとが増えるデメリットの方が大きかった。

プロパティレベルでは、IEサポート終了に伴いgapが一般化したので採用する。ネガティブマージンを利用した古いレイアウトCSSは削除。他にもハックが不要になった部分を更新していく。

カスケードレイヤーは非採用。ユーティリティCSSの優先度を上げる目的で試してみたが、後に書いたレイヤー表記なしのプレーンCSSが優先されてしまう。不特定多数の改修が絡むプロジェクトでは使いにくいと判断。whereで詳細度を抑えてユーティリティを利きやすくする方向。

指針

機能

開発

qrac commented 2 months ago

2024に入りコンセプトを変更したためクローズ。 #309 に引き継ぎ。