When using the custom CSS feature with a class, the output on the front-end remains inline, even if the ‘external stylesheet’ option is selected. However, when you add custom CSS at the ID level, the output is indeed placed in an external stylesheet.
I presented this question in the Facebook group and received confirmation from a Bricks user that this is accurate. (See link below for Facebook post)
You can replicate this behavior by following these steps, for example: Add a div element, go to custom CSS at the ID level, and add ‘%root% { height: 4rem; width: 4rem; background-color: red; }’ and save it. If you check the front-end, you will find this style added to a stylesheet.
However, when you add a class to that div element, go to custom CSS, and add, for example, ‘%root% { background-color: green; }’, save it, and inspect the front-end, you will observe that the CSS is added inline to the index.