何
私は本当にscoped cssが好きである。
cssのmodule設計は幾多あるが、だいたいがmoduleのネストで親子間の影響がネックになってmodule粒度が大きくなる傾向があった。
おそらくそういう文脈もあって、そこと向き合ったBEMはみんなに愛されているんだろうと思う。
ブラウザがネイティブでcssにscopeを与えようとした仕様は残念ながら消えてしまったがvue-loaderとかで変換される.vueファイルのようにcssにscopeを与えながら、単一コンポーネントをwebで実現する手段はいくつかある
vueファイルの例
<template><div><pclass="heading">piyo</p></div></template><stylescoped>p{font-weight:bold;}</style>ここで定義されたpのスタイルは上述の.heading要素にしか当たらないようにコンパイルされる
compile後のコード
変換後のコードを見てみる
<style>p[data-v-12345]{font-weight:bold;}</style><divdata-v-12345><pclass="heading"data-v-12345>piyo</p></div>するとhtml側にもstyle側にもそれぞれの要素・セレクタの末尾にdata属性が指定されている
セレクタの末尾にコンポーネントごとにユニークな[data-v-xxxx]を付与することでそれだけに効くスタイルができあがるというロジックらしい
簡易loader
踏まえてザルな簡易ローダーを作ってみるとこんな感じ
loader({template:`
<div>
<p class="heading">piyo</p>
</div>
`,style:`
p {
font-weight: bold;
}
`});functionloader(component){lethash=String(Date.now());// 大雑把なuuid替わりreturn`
<style>
${transformCSS(component.style,hash)}</style>
${transformHTML(component.template,hash)}
`;}functiontransformHTML(html,hash){letdataAttr=`data-${hash}`;returnhtml.replace(/<([^/]+?)>/mg,(body,$1)=>{return`<${$1}${dataAttr}>`})}functiontransformCSS(style,hash){letdataAttr=`[data-${hash}]`;returnstyle.replace(/([^{])\s*\{\s*([^}]*?)\s*}/mg,(body,$1,$2)=>{letselector=$1.split(',').map(v=>{return`${v.trim()}${dataAttr}`;}).join(',');return`${selector} {
${$2}
}`;})}出力
<style>p[data-1576831975938]{font-weight:bold;}</style><divdata-1576831975938><pclass="heading"data-1576831975938>piyo</p></div>selectorには@rule系とかあったり、擬似セレクタもあって末尾に必ずつけていいわけでもないのでcssのちゃんとしたparser使ってtransformした方がいいがおおよそ原理はこんな風になっているらしい。