With modern frameworks, developers started writing their styles in the HTML directly. It felt natural to new developers who liked keeping their HTML/JS for a component in a single Template/JSX file.
In my 'opinion', inline-styles polluted the DOM and get in the way. Browsers have to take a break while laying out to process each inline-style they encounter with the DOM nodes.
Keeping styles for each component in their own JSX makes it difficult to visualize the entire hierarchy in a large project. It is very easy to visualise in case of a SASS file (if done properly.)
Enter, styled-components which lets you write CSS as templates in JS and auto assigns a unique class name to every component. Hence no more element level styles. It also auto links the class to every instance of the component.
Under the hood, we are adding <style> nodes via JS and the browser has to generate the same class during every execution of the app/page (showcased as a feature - no build process). IMHO, this does not seem to bring in any advantage over the fact that browsers can easily parse external stylesheets once and cache them.
Consider the case where you are creating a UI framework from scratch. You would encounter nested elements, e.g. button inside a modal needs to be different than a button inside a hero component.
Of course having the ability to add custom CSS via JS is a good feature to have. Would you use it while building a React version of Bootstrap from scratch or go with a tool like SASS to create the styles for such a framework?
Looking for inputs from developers who work on modern UI/Frontend on how you handle styles for your components.
