MDN's CSS performance optimization article explains that external CSS is render-blocking because, until it is loaded, the browser has no way of knowing which elements can be "safely" rendered vs. which ones might be affected by style rules defined in the CSS file. By design, it seems, the browser tries to avoid the dreaded "Flash of Unstyled Content"!

The article offers media queries as a way to conditionally load external CSS in order to minimize the number of CSS bytes that must be downloaded before the page can be rendered. What it leaves unsaid—perhaps because this is too "obvious"?—is that we should avoid linking unused CSS by whatever means are available to us. For example, it is probably a bad idea to link CSS that includes style rules for a different page of the website because those unused rules block rendering for no benefit.

Regarding Atomic CSS, then, it certainly seems unwise to link proactively a huge number of utility class rules that may or may not be used on a given page or screen.

The referenced recommendation from Google appears to be partially based on the idea that style sheets reduce duplicate code (declarations) and therefore save bandwidth. This can certainly be true. However, JavaScript is at least as capable and is already used in modern web apps for HTML templating...