※こちらは Kent C. Doddsによる Epic Web のコースに関わる記事です
---
Intro to Styling
単語、フレーズ、発音
Mozilla - モジラ → モゼィラ （下線部がアクセント）
favicon - ファビコン → フェビコン
Manage Asset Links in a Remix Application
prefers-color-scheme
CSSのメディアクエリーの一つ。ダークテーマ、ライトテーマの検出ができる
https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme
ここまで、使い方の動画を見ずにやっていたので、webで受講していた。
Problem を終わったら、これはただのビデオコースじゃないよ という警告が。ハンズオンで能動的にやろうとのこと。一応web上でファイルの差分を見れるようなページもあるが、ローカル環境で手を動かすことを推奨されている。以来、ローカル環境で動かしている。体験が素晴らしく良くて楽しい。
Links to Public Files
<link>タグで直書きでsvgを記入することができるが、<Links /> コンポーネントのほうが良い。TypeScriptの型が使えることと、他のルートにいる時にlinkを追加できないらしい。詳細は後ほど。
Asset Imports
直接svgファイルを読み込むと、キャッシュが使われてしまう。
その回避方法としてクエリストリングをつけるというのは手としてありえるが、必ずその更新をする必要があり、いい方法とは言えない。（昔やってた懐かしい） Remixのassetsから読み込むようにしよう。フィンガープリントを作ってファイルの変更があった時はフィンガープリントが変更されて変更を検知し、更新できる。
※ ブラウザの Disable cache を切るのを忘れていて、普通にキャッシュされないで動作確認してしまった
単語、フレーズ、発音
suffice it to say that … - 強いていうなら、あえていうなら
But suffice it to say that the root route, where we are right now, is able to easily render these links.
bear - 運ぶ、持つ、支える、持ち合わせる、関係がある
bear responsibility - 責任を持つ（負う）
bear relevance - 関連性がある
the query string doesn't actually have any bearing on that file being served by our server
stink - くさい、ひどい、最低
That stinks
prone - （形）〜しがちである、〜する傾向がある
error prone - ミスが起こりやすい、エラーが起こりやすい
Global Styles
fontファイルもsvgのfaviconと同じように読み込むことで、同じような読み込みができる
Compiling CSS
PostCSSとは？
JavaScriptを使用してCSSを変換することで、ブラウザ差異のあるCSSをよしなに吸収して（ベンダープレフィックスを自動的に追加したり）、書きやすくしたりするもの
Kent氏がTailwindCSSを推す理由
Kent氏がTailwindCSSを推す理由の一つとして、アプリケーションのサイズに関係なくcssファイルが15kbを超えることがないのが、ユーザーエクスペリエンスの向上に繋がるから。大規模アプリケーションでCSSのスコープを小さくするのは本当に難しいから。
Building CSS
css-bundleとは何
割と理解に苦しんでしまったのだが、前提として import './styles/global.css' と記載しても、何も読み込まれることはない。では、CSSを読み込む方法として、 @remix-run/css-bundle が存在する。 css-bundle を使っていると、そのページ固有で読み込まれた必要なcssをとある1つのcssにして読み込むことができる。もちろん、globalcssやfontを全て1つのファイルにして読み込むということもできるが、実際に使う用途としては、あるページ固有で必要なcssを読み込む時に使う。
各種アセットを一括でbundleして読み込んだ場合
自動的に1つのファイルにまとめられる。これには複数のデメリットがある
1つのファイルにまとめられるので、例えばglobalのcssを少し変えただけでフィンガープリントが変わり、キャッシュが効かなくなるため、tailwind,font等のその他すべての情報を再度読み込む必要がある。これはパフォーマンス的に良くない
1つにまとめると読み込む順番の制御ができない
TS Reset
TS Resetというライブラリがあり、かゆい型エラーのところをいい感じに吸収してくれる
単語、フレーズ、発音
baked in - （何かが製品やシステムに元々から）組み込まれている、初めから含まれている
Sometimes, you need to use a library that comes with styles all baked in
スタイルが元から組み込まれたライブラリを使う必要がある場合もある
mileage out of something - 何かから得られる利益や価値
we're not going to dive into them because you get so much mileage out of Tailwind
Tailwindから非常に多くの利益を得られるので深く突っ込みません
deterministic - （形）決定的な
まとめ
Remixでの書き方というのが多かったような印象だが、普遍的なことで学んだこと
キャッシュを用いた効率的なアセットファイルの読み込み方
PostCSSを利用することで書きやすく”便利に”CSSを書ける
アセットファイルは一つにまとめず、できるだけ細かい単位で分ける
再度読み込まなくていいものは読み込まないようにするため
読み込む順番を制御できるようにするため