If you use SCSS and group your CSS by, e.g. a class in the body tag and additional nesting for components, or if your component-specific styles are loaded only

If you use SCSS and group your CSS by, e.g. a class in the body tag and additional nesting for components, or if your component-specific styles are loaded only when necessary (e.g. HTTP/2) then not much. The purpose of these techniques, or of prefixing your class names, is to avoid naming collisions. E.g. is your list supposed to have bullets? If you just say ul { list-style: none; } you've effectively said all lists shouldn't. But you might later say the opposite and not notice until your stylesheets are all compiled together and it's a race to see which one wins on every page. Or the other example posted (above, since this comment was downvoted for unknown reasons) where you move HTML around and your stylesheets aren't in sync. Of course, prefixing isn't for everyone -- e.g. https://github.com/twbs/bootstrap/issues/1235 https://github.com/twbs/bootstrap/issues/1235 -- some argue you should know all the styles on your page and how they interact, even if using a "CSS framework" and so naming collisions is just one of the things you'll have to worry about -- if you namespace, what's to prevent a naming collision even with your namespaces? :) This is also where it might be useful to point to https://speakerdeck.com/vjeux/react-css-in-js https://speakerdeck.com/vjeux/react-css-in-js