In the PageSpeed Insight report for my site, it's listing all of my css files as "render-blocking resources". My css links all look like this:
<link rel="stylesheet" type="text/css" media="all" href="https://example.com/something.css" />
In the documentation, it says <link rel="stylesheet"> tags are listed as render-blocking stylesheets if they don't have a media attribute that matches the user's device. Since my stylesheets all have media="all", why are they getting listed as render-blocking resources?
What they are trying to say is they will not flag something as render blocking if you have a media query that matches the users device only (so a max or min width or an orientation for example).
However even then they will flag it under 'critical CSS' and even if they don't flag it, it is still render blocking if that CSS is required for the 'above the fold' content.
Further down the page you linked in your question they explain it slightly better
Another approach to eliminating render-blocking styles is to split up those styles into different files, organized by media query. Then add a media attribute to each stylesheet link. When loading a page, the browser only blocks the first paint to retrieve the stylesheets that match the user's device.
That part is the important part, they are trying to get you to put your mobile styles in one style sheet, desktop in another so you only load the bear minimum CSS to render the page initially.
Ignore all the confusing stuff, here is the simplest way to tackle a few audits at once.
Any CSS that is required to render the 'above the fold' content should be inlined within your HTML within a style tag.
I will warn you, this is difficult, none of the tools out there do this perfectly and it must have every single style rule included to work. (e.g. if you missed just one class that is required to render something 'above the fold' the browser will wait for the style sheet that contains that rule to be loaded and block the rendering.)
I keep all my 'above the fold' styles in a separate file and inline them at runtime.
I split these files into 2 types - global (site header, general styles used on multiple pages above the fold etc.) and page-specific (e.g. hero for home page, form styling for contact forms etc... whatever is 'above the fold' on each page that is unique enough to not add to the global above the fold styles.)
This will deal with render blocking resources, critical request chains (for CSS) and give you super fast First Contentful Paint and First Meaningful Paint.
Then you just do as they suggest having styles for mobile and desktop separate and make sure you remove unused CSS if you can (yet again a very difficult task so best to design for it from the start).