CSSの歴史から選定まで

CSSの歴史から選定まで ~個人的思想~ 20250220 テテミート #12

自己紹介名前矢倉天心 SNS X: @ama_O255

CSSって？ A. Webページを構成するHTMLに対して、どう見えるかを制御し、好みのデザインやレイアウトで文書をユーザーに提供するための言語。

CSSの歴史と課題 1 名前空間 CSSはグローバルスコープを持つため、名前の衝突が起こりやすい。タグ要素自体を指定できるが、大体事故を起こす。 2 メンテナンス性上記理由により知らない間に使われていた、変更したら思ってないところが壊れる。
しかしプログラムのようにコンパイルエラーは無い。

CSSプリプロセッサの登場

CSS Modulesの登場 1 コンポーネント指向コンポーネントごとにスタイルを定義 Atomic Designなんかもこれが出来るようになって生まれた。 2 スコープの局所化スタイルがコンポーネント内に限定され、名前の衝突を防ぐ。
3 保守性の向上スタイルがコンポーネントと密接に結びつき、管理が容易。

CSS-in-JSの台頭 1 JavaScript記述 JavaScriptでスタイルを記述し、コンポーネントと一体化させる。 2 動的スタイリング propsやstateに応じて動的にスタイルを変化させることが可能。 3
柔軟性 JavaScriptの機能を活用し、高度なスタイリングを実現。

CSS-in-JSたち styled-components tagにstyleを書き込まず、あらかじめベースとなるタグに対して styleを指定してコンポーネント自体を書くように定義する。 emotion jsのobject同様の書き方や、従来のCSSの書き方をサポート。動的なスタイリングとは非常に相性が良い。

CSS Modules vs CSS-in-JS CSS Modules CSS-in-JS 記述方法 CSS, Sass
… JavaScript, CSS スコープ自動生成による衝突回避コンポーネント単位で適用動的スタイル静的柔軟パフォーマンス事前にCSSにコンパイルされ高速ランタイムに計算させるため影響はある

個人的スタイリング方法の選定チームのスキルセット使うUIライブラリのサポートや方針参考 https://techblog.zozo.com/entry/zozotown-css-in-js#fn:2 https://github.com/webpack-contrib/css-loader/issues/1050

ご清聴ありがとうございましたスライド作成にgammaもありがとう https://gamma.app/

CSSの歴史から選定まで

CSSの歴史から選定まで

tenshin_y

More Decks by tenshin_y

Other Decks in Programming

Featured

Transcript