CSSのスコープを小さくする
code:keyword
CSS in JS, CSS Modules, BEM
背景
しくみ
HTMLが解析され、DOMツリーが構築される
CSSが解析され、CSSOMツリーが構築される
DOMツリーとCSSOMツリーからレンダリングツリーが生成される
レンダリングツリーをもとに、描画される
これは、CSSのセレクタがグローバル定義になることを意味する
HTMLのclass属性を設定して、CSSをクラスセレクタで記述するのが一般的
開発者は、クラスの命名を工夫して、保守性の高いCSSを書く方法を模索してきた
コンポーネントベースのViewライブラリ・フレームワークが登場し、CSSのスコープを小さくする考えが登場した
例
CSS in JS
CSS Modules
いずれもクラス名を自動的につけてくれる?(自分で名付けたクラス名の末尾にランダム文字列が付与されるイメージ)
「CSSのスコープを小さくする」を満たす概念
標準
ref