Ein neuer Eintrag in der CSS-in-JS-Landschaft! Sieht so aus, als ob die Idee darin besteht, für jede Komponente eine einzelne CSS-Datei zu schreiben. Sie müssen in Komponenten arbeiten, so funktioniert das Ganze. In der gleichen Liga wie styled-components, css-modules und glamorous.
Dann schreiben Sie :scope { }, was der Basisstil für diese Komponente ist. Was, wie ich vermute, bedeutet, dass Sie sich keine Namen mehr ausdenken müssen! Aber es bedeutet auch, dass Sie ziemlich eingeschränkt sind (was bei fast jeder Stilverarbeitungs-Einrichtung der Fall ist).
Dann werden sowohl das CSS als auch die Komponente kompiliert und wahrscheinlich mit seinem Partner-Tool OptiCSS optimiert. Das Endergebnis sind super optimierte Stile. Da es „template-aware“ ist, können die Stile weitaus stärker optimiert werden, als dies bei jedem System möglich wäre, das versucht, CSS isoliert zu optimieren.
Mit CSS Blocks und OptiCSS im Kern können Sie ergonomisches CSS schreiben und den Build die Arbeit erledigen lassen, um Ihre Stylesheets richtig gescoped, blitzschnell und fantastisch klein zu machen.
Geschwindigkeit, Style-Scoping und das nie/selten vorhandene ungenutzte CSS scheinen für mich die großen Vorteile zu sein. Eine nicht triviale Umstellung, aber es klingt, als könnte es sich für viele große und neue Websites lohnen.
Ein paar Setup-Repos zum Erkunden, um zu sehen, wie es funktionieren könnte: css-blocks-webpack-3 und css-blocks-hello-world.