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 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.