I’ve always been taught that mixing CSS styles directly into HTML elements is bad practice for bigger websites. Usually, we put all the styling in separate CSS files to keep things clean.
But when I looked at Notion’s main page source code, I noticed they use tons of inline styles right in their HTML elements. For example:
This got me wondering why they chose this approach instead of using external stylesheets. Is this some kind of React thing or maybe there’s a performance benefit I don’t know about? The developers working on Notion clearly know their stuff so there must be a good reason for this choice.
I’ve worked on similar apps, and this is definitely about server-side rendering optimization. When you’ve got dynamic content that changes based on user prefs or real-time data, inline styles prevent that annoying flash where unstyled content shows up before the external CSS loads. Notion handles crazy amounts of user customization - dark/light themes, custom colors, layout tweaks - so they calculate styles server-side and inject them inline. Everything renders right away. Sure, the HTML gets messier, but load times feel way faster. Modern bundlers make this much easier now too, handling all the style generation and injection automatically.
from what i noticed, notion seems to be using inline styles for critical rendering path optimization. these styles get processed right away, unlike external css that needs to load first. with a complex editor like notion, every millisecond counts for first paint. they probably inline only critical styles during the build.
Yeah, this screams CSS-in-JS libraries like styled-components. These tools generate inline styles on the fly based on your component’s props and state, then dump them straight into the DOM. I’ve used this setup before - it breaks traditional CSS rules but works great for complex apps. You get proper style isolation, dynamic theming is way easier, and CSS conflicts basically disappear. Performance isn’t terrible either since browsers handle inline styles pretty well now. Notion probably went this route because their UI is super component-heavy with tons of dynamic styling that shifts based on user settings and content. Try managing that mess with regular CSS files - total nightmare.