CSS学習記録
CSS弱者なので、toCメディアに携わっているのを機会として、修行する。 プロパティの使い方とか雑に列挙していくだけのドキュメントになると思う。
擬似要素：
使いどきは大体被せ物をくっつける時だと思っている。
position：
初心者時代に雰囲気で理解したまま放置している存在。
overflow：
なんとなくで使ってるやつ。
hiddenにすると規定幅からはみ出た部分は隠される。スクロールはできない。
object-fit：
画像や動画のサイズ決めプロパティ。
本体のアスペクト比を保って、余白を用いてボックスサイズを作る場合はcontainにすると良い。
ボックスサイズに合わせて画像を拡大縮小する場合はcoverが使えるが、アスペクト比が合っていない場合は切り取りが生じる。coverを使うのは、「切り取り自体を気にしなくていいコンテンツ」「アスペクト比が保証されているコンテンツ」に限ると、意図しないレイアウト崩れが起きにくくなる。
aspect-ratio：
そんなん使えたんか……となったプロパティ。ボックスの推奨アスペクト比を決められる。
親にaspect-ratioを当ててアスペクト比を決定、子（コンテンツ）側にobject-fit: containをするとお手軽に可変余白の画像ボックスができる。コンテンツ側のアスペクト比を強制できていない場合におすすめの対処。
最近はほとんどのブラウザで使えるはずだからあまり気にせずに乱発していい気がする。
::placeholder：
擬似要素。カラー調整とかに使える
アクセシビリティ観点からの注意事項がある。詳しくは、↓のドキュメントたちを参照
ボーダー関係：
ボーダーの幅をボックスサイズに含める場合は、box-sizingをいじればOK。詳細は都度ググりでいい程度の内容。
radiusとか計算するの面倒なので、大体の場合はFigma見て固定値とかで良い（可変系には割合で当てたい気がするものの）。
コンポーネント設計とか：
今日日コンポーネント単位でクラス名空間が閉じる（グローバルな影響を与え合う・importantが登場する、などの旧来的バッドノウハウは防げる）のは前提としたい。
CSS Modulesを使って辛い場合、どちらかというとCSSよりもコンポーネント粒度がおかしい。
tailwindとかChakra UIとかの場合は、ツールの流儀に従えば変なことは起きない……たぶん。
「その情報は本来親に属するものでは」を子側に託さないとか、そういうのを愚直に守る。