整個看下來有個想法:
雖然他預設是 scoped,但同時也提供了複數種 cascade 的方式。它提供了重用的方法,但同時也增加了 unintended changes 的發生可能。
css-blocks 相對 styled-components 等 css-in-js 的解法,在 reuse 方面提供了很多種路徑,自由度很高。但正如 css modules 如果 compose 太多層就會改不動一樣,css-blocks 的 `extends` / `implement` 甚至是 template level 的 cascading 若濫用,都有可能會造成各種 component 間 tightly coupled 然後爛掉的狀況。
因此,即使 css-blocks 提供了很多 code reuse 的方式,但我們仍然要非常節制地使用它,才可以避免過多的 coupling style 導致未來牽一髮而動全身的慘況。style 之間的 inheritance / extend / cascading 都是一種封裝,而錯誤的封裝會比不封裝還糟。
再把 css-blocks 的 deadcode elimination + atomic-css like optimization 加進來考量,其實 css-blocks 最好的使用方式,或許是先放開雙手不要管任何的 code duplication (反正他會 optimize),等到專案長到一定大小、各個 component 之間開始有 common pattern,再去整理封裝,會比較好。至於封裝時什麼時候要在 css 裏 extend、什麼時候在 template 裏 cascade,團隊內有一致的共識就好。