Volvo Cars Design System: Our future CSS strategy

Jacob Rask, Volvo Cars Online Engineering, at the end of 2022 explaining why they are moving away from CSS-in-JS to CSS for the VVC UI project:

By utilising CSS-in-JS and colocating the styles with the component we avoid including unused CSS on our pages; a component’s styles will only be included on a page when it’s needed and if a feature is removed from a product, its styles will be deleted with it. At the same time, component based styles with CSS-in-JS lack some of the expressiveness of CSS selectors and assumptions you can make when writing plain CSS. Further, every component needs to start from scratch, resetting styles in a way that works across all browsers.

CSS-in-JS inlined in <style> on the page also avoids the problem of render blocking CSS, but this comes at a cost; on every page navigation you need to fetch all CSS again.

And:

With new additions to CSS like :where and @layer we have been able to create CSS resets and defaults that are non-intrusive and won’t override the CSS you write in an application. Instead of starting from a default stylesheet provided by different browsers you start from a default Volvo Cars stylesheet, reducing the amount of CSS you need to write for individual components.

Since then VVC UI got replaced by @volvo-cars/css, whose documentation starts like this:

In VCC UI, each ‘component’ was a React component – one which encapsulated markup, style (as CSS-in-JS) and functionality, like state management.

Now, we’ve taken a different approach. We’re HTML First – wherever possible, we’ve implemented our Figma Components in a single HTML element, using native state.

Embrace the platform!

Our future CSS strategy →