The Quest of the Styling Grail

EN

"At Yandex.Market we have a lot of different products with a wide variety of User Interfaces, plenty of client-side experiments like A/B tests, and each service have requirements such as performance, caching, theming and so on. And we've tried many different approaches in order to build a unified Design System which can be used by any of our services.

So, there are dozens of ways to style React applications, from Plain CSS and CSS-Modules to styled-components. Each option has tradeoffs. Yet the following problems often remain overlooked: styles, markup semantics, and accessibility.

Shadow DOM and frameworks like Svelte or Vue have made a step towards scoped styles for tags and attributes. However, it is still absent in React.

I would like to talk about the history of different web-applications styling solutions, and share some ideas about framework-agnostic library reshadow (https://reshadow.dev), which provides the Shadow DOM Developer Experience, but for the Virtual DOM.

It is about a way to match styles of complex application state on the simple declarative CSS selectors for tags, Components, and props, with efficient runtime and compile-time processing.

Thus, the more semantic and accessible markup you write, the simpler selectors you get.

At last but not least, reshadow makes it easy to completely restyle any Component, which in combination with Dependency Injection opens up additional possibilities in theming and A/B testing without product-code changes."

Artur Kenzhaev photo
Yandex.Market

Artur Kenzhaev

Moscow, Russia

Team Lead at Yandex, Yandex.Market Design System Lead Engineer.

Artur is obsessed with coding, music, drums and has Master Degree on Computational Linguistics. He's also passionate about software architecture, Type Systems and User/Application Interfaces. In his spare time, he looks for any ways to simplify complex things in the front end 😅

Twitter: @_lttb