業務のほうが落ち着いてきた。きのう (2016-09-28) ・おととい (2016-09-27) と同様に大きな進捗はない。

bouzuya/rally-client-example-vuejs の CSS 作成中に感じた点を書いておく。

CSS は時間がかかる。CSS を調整することは予想よりもいつも時間がかかる。これはきっとぼくの CSS の知識が低いのと道具をうまく使えていないからだろう。

LESS の extend 。LESS にも extend がある 。mixin と比べたときの大きな利点は最終的な CSS の size だという理解だ。これをうまく使えていない。使えていないだけでなく、使える気がしない。LESS の extend を使える気がしない理由はぼくの現状の方針にある。

ぼくの現状の方針は view component が LESS の Not Outputting Mixin を Function として提供する。view component の利用者は自分の使いたい場所で CSS の child selector (>) で scope を制限しながら使う。

この方針の長所は意図しない scope で CSS が適用されるのを防げる点。 LESS の Function により global な class への CSS 適用はない。ある view component はその配下の style を制御する責任を負う。

この方針の欠点は CSS の肥大化だ。LESS の Mixin を使うので使えば使うほど肥大化していく。extend を使えば解決できそうだが、 extend は既に定義されている class にしか適用できないと思っている (実は違っていたら困るな……) 。

このあたりの方針や使いかたがたぶん根本的にまずいのだと思う。Shadow DOM に向けた component 単位の style が主流になってきているはずだ。 scoped CSS や scoped style と呼ばれているはずだ。それらを取り入れるようにすれば scope の問題は解決するように思う。

今回は Vue.js の Single File Component が気持ち悪いからとかありがたみが分からなくなるからと vue-loader や vue-cli を避けたのだけど。よく読めば Single File Component でも Multi File にできるようだ。ほかにも 2016-09-23 のように template の build で事故を起こすわけだ……。次回は vue-cli & vue-loader でやってみたい。vue-loader に乗っかれば scoped CSS も標準機能として提供されており、幸せになれそうだ。