CSSの歴史から選定まで

テテミートで話したCSS周りの話

Transcript

1. CSSの歴史から選定まで ~個人的思想~ 20250220 テテミート #12
2. 自己紹介 名前 矢倉天心 SNS X: @ama_O255
3. CSSって？ A. Webページを構成するHTMLに対して、 どう見えるかを制御し、 好みのデザインやレイアウトで文書をユーザーに提供するための言語。
4. CSSの歴史と課題 1 名前空間 CSSはグローバルスコープを持つため、 名前の衝突が起こりやすい。 タグ要素自体を指定できるが、大体事故を起こす。 2 メンテナンス性 上記理由により知らない間に使われていた、変更したら思ってない ところが壊れる。 しかしプログラムのようにコンパイルエラーは無い。
5. CSSプリプロセッサの登場
6. CSS Modulesの登場 1 コンポーネント指向 コンポーネントごとにスタイルを定義 Atomic Designなんかもこれが出来るようになって生まれた。 2 スコープの局所化 スタイルがコンポーネント内に限定され、名前の衝突を防ぐ。 3 保守性の向上 スタイルがコンポーネントと密接に結びつき、管理が容易。
7. CSS-in-JSの台頭 1 JavaScript記述 JavaScriptでスタイルを記述し、コンポーネントと一体化さ せる。 2 動的スタイリング propsやstateに応じて動的にスタイルを変化させることが可 能。 3 柔軟性 JavaScriptの機能を活用し、高度なスタイリングを実現。
8. CSS-in-JSたち styled-components tagにstyleを書き込まず、あらかじめベースとなるタグに対して styleを指定してコンポーネント自体を書くように定義する。 emotion jsのobject同様の書き方や、従来のCSSの書き方をサポート。 動的なスタイリングとは非常に相性が良い。
9. CSS Modules vs CSS-in-JS CSS Modules CSS-in-JS 記述方法 CSS, Sass … JavaScript, CSS スコープ 自動生成による衝突回避 コンポーネント単位で適 用 動的スタイル 静的 柔軟 パフォーマンス 事前にCSSにコンパイル され高速 ランタイムに計算させる ため影響はある
10. 個人的スタイリング方法の選定 チームのスキルセット 使うUIライブラリのサポートや方針 参考 https://techblog.zozo.com/entry/zozotown-css-in-js#fn:2 https://github.com/webpack-contrib/css-loader/issues/1050
11. ご清聴ありがとうございました スライド作成にgammaもありがとう https://gamma.app/