Big organisations like Facebook, AirBnB, Instagram, Khan Academy etc have started using ReactJS. The fundamental principle is to treat each feature of the website as a single component or entity. This forces developers to write individual CSS for each and every component. The concept of global CSS vanishes with the rise of virtual DOM.
Is this good or bad for CSS? How do you plan to organise the CSS of the whole website when it is so fragmented? How do you use Pre-processors with this kind of arrangement?
We do use React and CSS per component approach mentioned here. The CSS code becomes simpler, there is no more (or very little) global / shared CSS rules which is a good thing I believe - easier to develop and maintain the project, very easy to refactor or remove obsolete stuff keeping your project nice an clean. And instead of reusing CSS you tend to compose UI elements, which dramatically improves the developer experience.
Björn
Insane Full-Stack Developer
We don't use react, but angularjs. We divide every component into its own module. Like our design mode, the toolbar, the different window object and so on.
Every element has its own css, which sits in the index.html with a command <!-- css build --> and ends in <!-- css endbuild --> (or something like this).
When we build the site, these files get concatenated and minified into one file and this one file gets automatically linked to the index.
So, when we remove a module we don't have to strip these parts off a global css. It's all automatic, just remove it from the index.html and it runs as always.
The good thing about this method is that we have different, changeable css files, but, because of the concatenation, one http request is needed to retrieve the the css file.