Why is it (or was it) important to separate CSS from HTML?

Intro

I recently watched the slides from React: CSS in JS and I really like the idea of having CSS applied using JS (and with JSX, this would mean having all the HTML, JS and CSS in one file, which is just great for small, reusable components); however I'm worried about possible problems with semantic/performance/whatever, which lead me to...

The question

Why is it important to separate CSS from HTML?

Obvious reasons I can think of are avoiding duplication and keeping the HTML purely semantic while letting CSS handle the styling. I can do both in JS. Are there any other reasons I'm missing?

Edit: I missed a very important thing here - I'm designing architecture for a big web application, not some small blog thing. It will have its own build pipeline, with virtually any configuration possible.