Remixのスタイリングどうすればいいの

2022年3月ではReact周りのスタイリング手法がありすぎて、どれを採用すれば良いのかよくわからない。Remixの公式でも色んな手法が紹介されている。プレーンなCSSを用いる方法では、Route StyleとShared Component Stylesの２通り紹介されている。

前提として、個人開発でデザインに割く時間はあまりない上にデザイン力もあんまりない。
CSSはちょっと書けるが詳細度とか込み入ってくるとわからない。
BootStrapやMUIが作ろうとしているサイトに適用できるかどうかで変わってきそう。

BootStrapやMUIがそのまま適用できる→採用

ただ、Remixの場合、UIにおいて個性あふれるサイトと無個性なサイトに両極化しそうな感じがする。
公式のチュートリアルがすでにそんな雰囲気を醸し出している。

個性があふれないサイトなら迷わずBootStrapやMUIを採用するところだ。
そうでない場合が問題で、ちょっと調べたところ２通りの手法が考えられそう。

Tailwind CSS
ClasslessなCSS

今回はClassless CSSを使ってみることにした。
Classless CSSというのはタグにスタイリングするCSSのことで、クラス指定はされていない。
これのメリットは適用するだけでデザインが良くなることだと思う。学習コストがほぼゼロなのが良い。プレーンなCSSならデザイナーに疑問点を聞くこともできるし、話が通じやすいはず。
Classlessで漁ってみて、以下の２つに絞った。

	Almond.css	Water.css
IE11	非対応	対応
UIの数	多い	普通
テーマ設定のしやすさ	しやすい	普通

IE11対応は考えていないので、とりあえずAlmond.cssをいじってみることにした。
話は逸れるがClassless CSSジェネレータとかあったら使いたい。

smallStall

下記ファイルをコピーし、app/root.tsxに適用した。

リセットCSSも加えた。

配色デザイン辞典をめくって色を決めた。Sample-037にする。
https://www.natsume.co.jp/books/10898

VS Code上でカラーコードをHSLに変換

almond.cssにある--primaryH, --primaryS, --primaryLなどの値を書き換える。

アクセシビリティを一応チェック。アクセントカラーについては多少低くても無視。

スマホなどの画面に映してみて色が転んでいないかチェック、修正。

smallStall

almond.cssを修正する。
CSSテスト用のhtmlをalmond.css公式からもらい、少し修正した。

aタグ、pタグ等の検索性が落ちるタグにはatag, ptag等のコメントを付与した。
pタグ等の読み込み系の色指定をprimary-darkerにした。
aタグ等の入力系の色指定をsecondaryにした。
アイコンの一部をGoogle Fontsのものに変更した。

svgからcssのbackground-imageへの変更にはこちらのサイトを使わせていただいた。
テストページに色の比較を置いた。デザイナーならもっとしっかりしたものを持っていそうだが、とりあえずはこれで色を決めることに。

smallStall

PostCSSにてAutoprefixerを有効化した。また、Stylelintを加えた。

npm i -D sass stylelint stylelint-config-standard postcss postcss-cli autoprefixer postcss-nested  cssnano

package.json

...
    "dev:stylelint": "stylelint styles/*.css",
    "dev:postcss": "postcss styles --dir app/styles --watch",
...
  "browserslist":[
    "last 3 versions",
    "> 2%"
  ],
...

.stylelintrc.json

{
  "rules": {
    "at-rule-no-unknown": null,
    "comment-whitespace-inside": null,
    "selector-id-pattern": null,
    "rule-empty-line-before": null,
    "declaration-empty-line-before": null
  },
  "extends": [
    "stylelint-config-standard"
  ]
}

postcss.config.js

module.exports = {
  plugins: [
    require("postcss-nested"),
    require("autoprefixer"),
    require('cssnano')({
      preset: 'default',
    }),
  ],
}

進捗を確認。

testページにてalmond.cssを確認できるようにした。
Classless CSSがどんなものなのか、ざっくり理解した。
RemixにてPostCSS環境を作った。
今後はRemixのRoute Styleと組み合わせてどんなふうになるのか（そもそもうまくいくのか）試してみる次第。

smallStall

Classless CSSにてデザインしたものとは別なスタイルのボタンを作成したが、:hoverなどは!importを使用しないと変更できなかった。詳細度がClassless CSSのほうが高く、新しく作ったスタイルのボタンのほうが低かったため。Classless CSSの方でwhere:を使うことで詳細度を０にできるとのこと。2022年3月では主要ブラウザで使えるものの、カバー率は90%弱くらいでまだ用途を選びそう。

smallStall

ふと思ったんだけど、Remixってあんまりコンポーネントベースで作られていないんじゃないかなと思う。じゃあ何ベースなのさと言えば、ルート(Route)ベースのような気がする(Route Style)。極端に言えば、Reactによくあるようなcomponentファイルをたくさん作る設計にあまりなっていないんじゃないかな。もちろんそういうこともできなくはないけれど(Shared Component Styles)、Tailwindを使わないと現状では難しそう。
ルートはフォルダ構造で決まってしまうわけだから、コンポーネントに比べれば柔軟性がない。とはいえ、ヘッダーやフッターのようなものならルートによって省略して書ける。つまり、ルートは木構造でコンポーネントはグラフ構造だ。
どっちのほうが良いのかはなんとも言えない。ルートの良いところは影響範囲が分かりやすいことだ。フォルダ構造を見ればCSSを変更した際の影響範囲がわかる。コンポーネントの良いところは自由度で、好きなところに入れることができる。ホームから分岐するだけのサイトならルートベースで、迷路のような複雑なサイトならコンポーネントベースのほうが良さそう。

smallStall

Routeを理解するのが難しい。
今の理解では次のような感じ。
Routeはファイル構造というルールを使ってComponentの欠点（どこに何が使われているのか、ぱっと見よくわからん問題）を改善しようとしたもの。Componentはどこで使うかが決まっていない（当然だが）。柔軟性があるとも言えるけど悪いこともある。Componentを変更した際に影響範囲が読みづらい点が問題で、下記記事の内容はRoute Stylesと似た思想を感じた。

また、ファイル構造によってURLが生成されるわけだから、結局はRoute⇔URLになる。

Route Stylesの欠点として、ファイル構造を変えるとURLに反映されてしまうことだと思っていたが、一部例外がある。Pathless Layout Route方式なら、URLを反映させずにRouteの組み合わせで書くことができる。フォルダとそのindex.tsxを同じ名前にして、頭にアンダーバー２つ__つける。そうすることでURL上は__をつけたファイルおよびフォルダが無視されることになる。コンポーネント上では考慮される。URLをネストしたくないならこの方法を使うと良さそう。

一方で、URLはネストさせたいが、無駄にコンポーネントをネストさせたくないときもある。そういうときにはNested URLs without nesting layoutsを使う。ファイル名にドットをつけるとURLのスラッシュと解釈される。

ここらへんは図解した方がわかりやすそう。

このスクラップは2022/07/24にクローズされました