I've been trying to figure out how to understand the new CSS @layer property properly, and this gives a fantastic lesson/overview.
This was a really nice point:
Sometimes, we don't have the time to implement a feature properly, but we still need to add code to fix a bug. If you use sub-layers inside your components layer, you put your hotfixes directly in the components layer. These unlayered styles have a higher specificity than the layered styles, which you want in this case, and you can distinguish them from properly implemented code.
Everything that's unlayered inside the components layer must be cleaned up at some point. We also encourage you to always add comments to unlayered styles.
I really like the way of using unlayered styles as a way to identify what needs to be cleaned up, and where. Helps with identifying potential refactor areas (especially when working with many peoples).
The utility layer is reserved for utility and helper classes. It comes late in the order of layers because utility classes should have the highest specificity of all regular styles.
Hah! That makes sense.